python实现网页/HTML截图并转PDF

分手后的思念是犯贱 2023-01-22 09:00 22阅读 0赞

通过Python，Node等服务端程序对现有网站或者HTML文件在不打开浏览器窗口的情况下进行截图，可以很方便的实现某些需求。如

*  实现办公自动化，将数据制作成<tr><td>表格或者图表后截图保存为PDF或图片，发送到通讯软件中
 *  GEO程序的开发，可以把地图和上面的自定义标记截图下来，以图片形式嵌入到自己应用中，这样就不需要集成地图SDK了
 *  网站的定期自动化快照，可以保留网站变化历史
 *  增强对浏览器和移动端的支持，对于无法渲染HTML5的浏览器，可以直接以图片代替

等等需求还有很多。下面介绍集中常用的方法。

# 方案一：Python+wkhtmltopdf #

这个是百度出来最常见的方案，通过下载wkhtmltopdf/wkhtmltoimg工具，然后在python中进行跨进程调用，实现截图和保存为PDF，首先我们需要先上其官网下载Driver文件，其实就是一个Headless无窗口的虚拟浏览器，其内核为QtWebKit，类似早期苹果手机的Sarfari，对HTML5的支持较差

其官网为：[https://wkhtmltopdf.org/downloads.html][https_wkhtmltopdf.org_downloads.html] 支持Linux和Windows服务器，并且支持多种CPU的架构

### 1、保存为图片 ###

import imgkit
    import pdfkit
    
    if __name__ == '__main__':
        path_wkimg = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe'  # 工具路径，需要替换为服务器的真实路径
        cfg = imgkit.config(wkhtmltoimage=path_wkimg)
        options = {
            'javascript-delay': '2000',
            'height': '1500',
            'width': '2000'
        }
        # 1、将html文件转为图片
        imgkit.from_file(r'F:/map.html', 'map.jpg', config=cfg, options=options)
        # 2、从url获取html，再转为图片
        imgkit.from_url('https://html5test.com/', 'h5.jpg', config=cfg, options=options)
        # 3、将字符串转为图片
        imgkit.from_string('<h1>Hello!</h1>', 'hello.jpg', config=cfg)

javascript-delay是等待js执行的时间，而不是等HTML都加载完直接截图，根据实际页面渲染时间来定

height和width是浏览器窗口的大小，可以超过显示器的实际大小（服务器上没有浏览器也无所谓），所以如果要截取整个页面，需要把height设置到和预估的网页高度一样。

如果不设置height，可以自动截取到页面底端，但是往往测算的会有问题，远远超出实际的大小，后文会有详细的测试

### 2、保存为PDF ###

import pdfkit
    
    if __name__ == '__main__':
        cfg = imgkit.config(wkhtmltoimage=path_wkimg)
        options_pdf = {
            'javascript-delay': '15000',
            'margin-bottom': '20mm',
            'footer-line': None
        }
        path_wkpdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'  # 替换为服务器的真实路径
        config = pdfkit.configuration(wkhtmltopdf=path_wkpdf)
        url = 'https://html5test.com'
        pdfkit.from_url(url, 'h5.pdf', configuration=config, options=options_pdf)
        pdfkit.from_file('C:/echats.html', options=options_pdf,configuration=config,output_path='echarts.pdf')

# 方案二：Python+selenium #

selenium是很火的Python前端自动化测试框架，通过指定chrome浏览器的Driver，可以在有窗口或Headless的情况下进行截图，但是无法转换为PDF，也无法自动截取全高度网页，必须指定窗口大小

有点是ChromeDriver可以在Headless或窗口模式下执行，只需要指定--headless参数即可。这样就可以在程序执行的时候观察实际效果。并且selenium还可以在页面上执行自定义js代码，用来滚动屏幕，非常好用

下载ChromeDriver的地址是：[https://sites.google.com/chromium.org/driver/downloads?authuser=0][https_sites.google.com_chromium.org_driver_downloads_authuser_0]

from selenium import webdriver
    from selenium.common.exceptions import WebDriverException
    
    if __name__ == '__main__':
        options = webdriver.ChromeOptions()
        options.add_argument('--headless')
        options.add_argument('--disable-gpu')
        options.add_argument('--no-sandbox')
        options.add_argument('window-size=1920x1080')
    
    
        try:
            driver = webdriver.Chrome(executable_path='chromedriver_win32/chromedriver.exe', options=options)
            # driver.get("file:///C:/map.html")
            driver.get('https://echarts.apache.org/examples/zh/editor.html?c=graph')
            driver.execute_script("window.scrollTo(0,100)")# 执行自定义JS滚动屏幕，可以动态测出整个body的宽度和高度
            driver.set_window_size(2000, 2000)  # 写死一个屏幕宽度和高度，高度可以超出显示器的物理高度，可以用动态测量的值，参考https://blog.csdn.net/BobYuan888/article/details/108769274
            time.sleep(5)
            driver.get_screenshot_as_file("echarts.png")
            driver.quit()
        except WebDriverException as err:
            print("截图失败")
            print(err)

在get方法中，可以写http,https的互联网地址，也可以写本地文件的相对路径

# 方案三：Node+Puppeteer #

Puppeteer是谷歌亲儿子，由谷歌主导的前端测试框架，与selenium类似，在Node会自动下载一个谷歌的开发板，可以选择Headless或窗口模式，默认为Headless，既可以截图，又可以保存为PDF，并且相比selenum，可以准确的测出完整页面的高度，对截图非常友好

官网：[https://developers.google.com/web/tools/puppeteer/get-started][https_developers.google.com_web_tools_puppeteer_get-started]

npm -i puppeteer

在截图时，使用fullPage参数可以准确的截取整个网页的图片，非常友好。PDF模式下，只需指定纸张大小，无需关心高度

# 测试 #

下面我们以wkhtmltopdf来测试一下，如html5测试网站的截图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70][]

这个是指定height和width的最终截图，是不能截取整个页面的，分数166已经是低到了尘埃里，现在能用的浏览器往往在500分以上，就连微信自带的浏览器也是500+，钉钉自带浏览器400+

如果不指定height

options = {
            'javascript-delay': '8000',
            'width': '2000'
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 1][]

会发现远超页面的实际大小，但是同样的问题，在保存为PDF的时候没有出现，高度刚刚好

再来测试一下对地图的支持，我们登陆高德开放平台自定义地图[https://lbs.amap.com/tools/creater][https_lbs.amap.com_tools_creater]，浏览器打开实际的效果是这样子的，可以在地图上设置自己的标记，并生成HTML保存成文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 2][]

HTML如下

<!DOCTYPE html>
     <html>
     <head>
       <meta charset="utf-8">
       <meta name="keywords" content="高德地图,DIY地图,高德地图生成器">
       <meta name="description" content="高德地图，DIY地图，自己制作地图，生成自己的高德地图">
       <title>高德地图 - DIY我的地图</title>
       <style>
         body { margin: 0; font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif"; min-height: 960px; min-width: 600px; }
         .my-map { margin: 0 auto; width: 800px; height: 640px; } .my-map .icon { background: url(http://a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat; } .my-map .icon-cir { height: 31px; width: 28px; } .my-map .icon-cir-red { background-position: -11px -5px; }
         .amap-container{height: 100%;}
         .myinfowindow{width: 240px;min-height: 50px;}
         .myinfowindow h5{ height: 20px; line-height: 20px; overflow: hidden; font-size: 14px; font-weight: bold; width: 220px; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; }
         .myinfowindow div{ margin-top: 10px; min-height: 40px; line-height: 20px; font-size: 13px; color: #6f6f6f; }
       </style>
     </head>
     <body>
       <div id="wrap" class="my-map">
         <div id="mapContainer"></div>
       </div>
       <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=11sxxxxxxxxxxxxxxxxxxxxxxx"></script>
       <script>
       !function(){
         var infoWindow, map, level = 14,
           center = {lng: 116.302676, lat: 39.96818},
           features = [{"icon":"cir","color":"red","name":"未命名标注","desc":"未命名标注描述","lnglat":{"Q":39.979098460047545,"R":116.29847035378219,"lng":116.29847,"lat":39.979098},"offset":{"x":-9,"y":-31},"type":"Marker"}, {"strokeWeight":2,"strokeColor":"#19A4EB","strokeOpacity":0.8,"fillColor":"#F0202F","fillOpacity":0.2,"name":"未命名标注","desc":"未命名标注描述","path":[{"Q":39.97456016252131,"R":116.29027352303268,"lng":116.290274,"lat":39.97456},{"Q":39.973376209253196,"R":116.28417954415085,"lng":116.28418,"lat":39.973376},{"Q":39.96686409967301,"R":116.28812775582077,"lng":116.288128,"lat":39.966864}],"lnglat":{"Q":39.96686409967301,"R":116.28812775582077,"lng":116.288128,"lat":39.966864},"type":"Polygon"}, {"strokeWeight":2,"strokeColor":"#FFCC02","strokeOpacity":0.8,"fillColor":"#FFCC02","fillOpacity":0.82,"name":"未命名标注","desc":"未命名标注描述","path":[{"Q":39.972850001217346,"R":116.30490765541794,"lng":116.304908,"lat":39.97285},{"Q":39.966600971094714,"R":116.30713925331833,"lng":116.307139,"lat":39.966601},{"Q":39.968311288750215,"R":116.32112965554,"lng":116.32113,"lat":39.968311},{"Q":39.97594141541203,"R":116.31829724282028,"lng":116.318297,"lat":39.975941},{"Q":39.97673069024431,"R":116.31726727455856,"lng":116.317267,"lat":39.976731}],"lnglat":{"Q":39.97673069024431,"R":116.31726727455856,"lng":116.317267,"lat":39.976731},"type":"Polygon"}];
     
         function loadFeatures(){
           for(var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++){
             data = features[i];
             switch(data.type){
               case "Marker":
                 feature = new AMap.Marker({ map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                   zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                   content: '<div class="icon icon-' + data.icon + ' icon-'+ data.icon +'-' + data.color +'"></div>' });
                 break;
               case "Polyline":
                for(j = 0, jl = data.path.length, path = []; j < jl; j++){
    							path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
    						}
                 feature = new AMap.Polyline({ map: map, path: path, extData: data, zIndex: 2,
                   strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity });
                 break;
               case "Polygon":
                 for(j = 0, jl = data.path.length, path = []; j < jl; j++){
                   path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat));
                 }
                 feature = new AMap.Polygon({ map: map, path: path, extData: data, zIndex: 1,
                   strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                   fillColor: data.fillColor, fillOpacity: data.fillOpacity });
                 break;
               default: feature = null;
             }
             if(feature){ AMap.event.addListener(feature, "click", mapFeatureClick); }
           }
         }
     
         function mapFeatureClick(e){
           if(!infoWindow){ infoWindow = new AMap.InfoWindow({autoMove: true,isCustom: false}); }
           var extData = e.target.getExtData();
           infoWindow.setContent("<div class='myinfowindow'><h5>" + extData.name + "</h5><div>" + extData.desc + "</div></div>");
           infoWindow.open(map, e.lnglat);
         }
     
         map = new AMap.Map("mapContainer", {center: new AMap.LngLat(center.lng, center.lat), level: level, keyboardEnable:true, dragEnable:true, scrollWheel:true, doubleClickZoom:true});
         
         loadFeatures();
     
         map.on('complete', function(){
           map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function(){
             map.addControl(new AMap.ToolBar({ruler: true, direction: true, locate: false})); map.addControl(new AMap.OverView({isOpen: true})); map.addControl(new AMap.Scale);
           });	
         })
         
     	}();
       </script>
     </body>
     </html>

截图效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 3][]

效果非常好，除了高度测算的不准以外，截图和转PDF都成功的把地图上的标记，水印都完整的截取下来了

下面再测试以下图标，下面以最近很火的echarts库为例，页面代码如下

<!DOCTYPE html>
    <html style="height: 100%">
        <head>
            <meta charset="utf-8">
        </head>
        <body style="height: 100%; margin: 0">
            <div id="container" style="height: 100%"></div>
    
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    
           
    		<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            
            
            
            
    
            <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
    
    var option;
    
    
    
    myChart.showLoading();
    $.get(ROOT_PATH + '/data/asset/data/flare.json', function (data) {
        myChart.hideLoading();
    
        myChart.setOption(option = {
    
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
    
            series:[
                {
                    type: 'tree',
    
                    data: [data],
    
                    left: '2%',
                    right: '2%',
                    top: '20%',
                    bottom: '8%',
    
                    symbol: 'emptyCircle',
    
                    orient: 'BT',
    
                    expandAndCollapse: true,
    
                    label: {
                        position: 'bottom',
                        rotate: 90,
                        verticalAlign: 'middle',
                        align: 'right'
                    },
    
                    leaves: {
                        label: {
                            position: 'top',
                            rotate: 90,
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },
    
                    emphasis: {
                        focus: 'descendant'
                    },
    
                    animationDurationUpdate: 750
                }
            ]
        });
    });
    
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    
            </script>
        </body>
    </html>

使用wkhtmltopdf输出pdf或截图，只有一个白色背景，什么都没有，说白了就是不支持echarts，估计与QtWebkit对HTML5支持太差有关，而selenium和Puppeteer使用chrome浏览器的开源最新chromium内核，对H5的支持非常好，截图效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 4][]

三个方案经过测试汇总如下

<table> 
 <tbody> 
  <tr> 
   <td style="width:117px;">方案</td> 
   <td style="width:117px;">窗口模式</td> 
   <td style="width:117px;">后台模式</td> 
   <td style="width:130px;">截图</td> 
   <td style="width:118px;">截图完整页面</td> 
   <td style="width:104px;">HTML5支持性</td> 
   <td style="width:147px;">PDF</td> 
   <td style="width:109px;">PDF完整页面</td> 
   <td style="width:83px;">地图</td> 
   <td style="width:83px;">echarts</td> 
   <td style="width:83px;">BootStrap</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">wkhtmltopdf</td> 
   <td style="width:117px;">不支持</td> 
   <td style="width:117px;">支持</td> 
   <td style="width:130px;">支持</td> 
   <td style="width:118px;">高度不准</td> 
   <td style="width:104px;">166</td> 
   <td style="width:147px;">支持</td> 
   <td style="width:109px;">支持</td> 
   <td style="width:83px;">支持</td> 
   <td style="width:83px;">不支持</td> 
   <td style="width:83px;">部分支持</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">selenium</td> 
   <td style="width:117px;">支持</td> 
   <td style="width:117px;">支持</td> 
   <td style="width:130px;">支持</td> 
   <td style="width:118px;">不支持</td> 
   <td style="width:104px;">528</td> 
   <td style="width:147px;">不支持</td> 
   <td style="width:109px;">——</td> 
   <td style="width:83px;">支持</td> 
   <td style="width:83px;">支持</td> 
   <td style="width:83px;">支持</td> 
  </tr> 
  <tr> 
   <td style="width:117px;">Puppeteer</td> 
   <td style="width:117px;">支持</td> 
   <td style="width:117px;">支持</td> 
   <td style="width:130px;">支持</td> 
   <td style="width:118px;">支持</td> 
   <td style="width:104px;">528</td> 
   <td style="width:147px;">支持</td> 
   <td style="width:109px;">支持</td> 
   <td style="width:83px;">支持</td> 
   <td style="width:83px;">支持</td> 
   <td style="width:83px;">支持</td> 
  </tr> 
 </tbody> 
</table>

[https_wkhtmltopdf.org_downloads.html]: https://wkhtmltopdf.org/downloads.html
[https_sites.google.com_chromium.org_driver_downloads_authuser_0]: https://sites.google.com/chromium.org/driver/downloads?authuser=0
[https_developers.google.com_web_tools_puppeteer_get-started]: https://developers.google.com/web/tools/puppeteer/get-started
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70]: /images/20221020/3bd9f0c762d243888f8d21590a4aeec8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 1]: /images/20221020/90d38dbfc88a42678d834fb04c2bfb83.png
[https_lbs.amap.com_tools_creater]: https://lbs.amap.com/tools/creater
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 2]: /images/20221020/312c36e0f14c4ce4b918a36ef91ec4d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 3]: /images/20221020/b86db0f6a7b84b7b8711076b3187ebf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2c2hhb3Jvbmc_size_16_color_FFFFFF_t_70 4]: /images/20221020/d75c68f5a9444cd39c4a25e14f8f5c3a.png