网页快照几种实现方案参考 (一)、HTML转图片1.使用 html2canvas 制作网页快照（1）介绍官网： https://html2canvas.hertzen.com/Html2canvas是一个JS库，通过在web引入JS的方式，点击按钮后可以根据ID呼叫需要制作快照的标签，会根据标签制作成图片。（2）使用方法如需要制作快照的html为：<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4></div>那么使用html2canvas 制作快照只需要html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas)});（3）特征其支援的WebBrowser包含Firefox 3.5+Google ChromeOpera 12+IE9+Safari 6+优点：支援的WebBrowser较多，使用比较方便，只需要引入一个JS即可缺点：需要根据ID制作快照2.使用wkhtmltoimage 制作网页快照（1）介绍官网：https://wkhtmltopdf.org/wkhtmltoimage是一个独立的程序，和wkhtmltopdf属于同一个程序中，支援Windows、Ubuntu、Centos、Debian、MacOS等主流操作系统，安装完毕之后使用十分方便，只需要一个url即可制作成快照图片或者pdf。（2）使用方法使用简单，只需要一个可以访问的url即可wkhtmltoimage http://openclever.pro/OpenRich/admin/login.aspx login.pngWkhtmltoimage [要制作快照的url] [输出档的路径]完整中文参数详解在：https://note.coccoo.cc/Archive/wkhtmltopdforimage_params_zh.html（3）特征优点：使用十分方便，支援的操作系统较多缺点：需要使用可以直接访问的url（如果需要登陆的页面可能无法拍快照）3.使用WebSiteThumbnail制作网页快照（C#）（1）介绍使用WebSiteThumbnail.cs制作网页快照，把这个class放入C#项目中，然后直接呼叫GetWebSiteThumbnail这个Function就可以制作快照图片。WebSiteThumb.cs下载（2）使用方法 //在任意网页中的Page_Load事件时，加入如下代码： protected void Page_Load(object sender, EventArgs e) { Bitmap m_Bitmap = WebSiteThumbnail.GetWebSiteThumbnail("http://www.google.cn", 600, 600, 600, 600); MemoryStream ms = new MemoryStream(); m_Bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);//JPG、GIF、PNG等均可 byte[] buff = ms.ToArray(); Response.BinaryWrite(buff); }（3）特征优点：C#语言，可以融入项目中缺点：没来得及测试，暂不清楚效果如何（二）、存储当前网页的Coding版本渲染1.使用保存Html源码的形式制作快照（1）介绍把整个html的源代码（包含所有html、js和css）保存下来，类似于在浏览器中Ctrl+S存储为 .html 的档案，命名为 文件名-版本号.html，如 detail-26018.html，这样只需要记录版本号 26018 就可以找到对应的文件名称，直接展示即可作为快照使用。（2）使用方法把渲染出来的画面直接保存为 xxx-version.html ，需要查看快照的时候直接展示在浏览器即可。（3）特征优点：便于存储和管理，可以还原成页面原本的样子缺点：存储大量档可能会导致服务器缓慢，可以不存在DB而是存于io中，DB直接保存io的位置即可

wkhtmltopdf中文参数详解 wkhtmltopdf [OPTIONS]... <input file> [More input files] <output file> 常规选项 --allow <path> 允许加载从指定的文件夹中的文件或文件（可重复） --book* 设置一会打印一本书的时候，通常设置的选项 --collate 打印多份副本时整理 --cookie <name> <value> 设置一个额外的cookie（可重复） --cookie-jar <path> 读取和写入的Cookie，并在提供的cookie jar文件 --copies <number> 复印打印成pdf文件数（默认为1） --cover* <url> 使用HTML文件作为封面。它会带页眉和页脚的TOC之前插入 --custom-header <name> <value> 设置一个附加的HTTP头（可重复） --debug-javascript 显示的javascript调试输出 --default-header* 添加一个缺省的头部，与页面的左边的名称，页面数到右边，例如： --header-left '[webpage]' --header-right '[page]/[toPage]' --header-line --disable-external-links* 禁止生成链接到远程网页 --disable-internal-links* 禁止使用本地链接 --disable-javascript 禁止让网页执行JavaScript --disable-pdf-compression* 禁止在PDF对象使用无损压缩 --disable-smart-shrinking* 禁止使用WebKit的智能战略收缩，使像素/ DPI比没有不变 --disallow-local-file-access 禁止允许转换的本地文件读取其他本地文件，除非explecitily允许用 --allow --dpi <dpi> 显式更改DPI（这对基于X11的系统没有任何影响） --enable-plugins 启用已安装的插件（如Flash --encoding <encoding> 设置默认的文字编码 --extended-help 显示更广泛的帮助，详细介绍了不常见的命令开关 --forms* 打开HTML表单字段转换为PDF表单域 --grayscale PDF格式将在灰阶产生 --help Display help --htmldoc 输出程序HTML帮助 --ignore-load-errors 忽略claimes加载过程中已经遇到了一个错误页面 --lowquality 产生低品质的PDF/ PS。有用缩小结果文档的空间 --manpage 输出程序手册页 --margin-bottom <unitreal> 设置页面下边距 (default 10mm) --margin-left <unitreal> 将左边页边距 (default 10mm) --margin-right <unitreal> 设置页面右边距 (default 10mm) --margin-top <unitreal> 设置页面上边距 (default 10mm) --minimum-font-size <int> 最小字体大小 (default 5) --no-background 不打印背景 --orientation <orientation> 设置方向为横向或纵向 --page-height <unitreal> 页面高度 (default unit millimeter) --page-offset* <offset> 设置起始页码 (default 1) --page-size <size> 设置纸张大小: A4, Letter, etc. --page-width <unitreal> 页面宽度 (default unit millimeter) --password <password> HTTP验证密码 --post <name> <value> Add an additional post field (repeatable) --post-file <name> <path> Post an aditional file (repeatable) --print-media-type* 使用的打印介质类型，而不是屏幕 --proxy <proxy> 使用代理 --quiet Be less verbose --read-args-from-stdin 读取标准输入的命令行参数 --readme 输出程序自述 --redirect-delay <msec> 等待几毫秒为JS-重定向(default 200) --replace* <name> <value> 替换名称,值的页眉和页脚（可重复） --stop-slow-scripts 停止运行缓慢的JavaScripts --title <text> 生成的PDF文件的标题（第一个文档的标题使用，如果没有指定） --toc* 插入的内容的表中的文件的开头 --use-xserver* 使用X服务器（一些插件和其他的东西没有X11可能无法正常工作） --user-style-sheet <url> 指定用户的样式表，加载在每一页中 --username <username> HTTP认证的用户名 --version 输出版本信息退出 --zoom <float> 使用这个缩放因子 (default 1) 页眉和页脚选项 --header-center* <text> (设置在中心位置的页眉内容) --header-font-name* <name> (default Arial) (设置页眉的字体名称) --header-font-size* <size> (设置页眉的字体大小) --header-html* <url> (添加一个HTML页眉,后面是网址) --header-left* <text> (左对齐的页眉文本) --header-line* (显示一条线在页眉下) --header-right* <text> (右对齐页眉文本) --header-spacing* <real> (设置页眉和内容的距离,默认0) --footer-center* <text> (设置在中心位置的页脚内容) --footer-font-name* <name> (设置页脚的字体名称) --footer-font-size* <size> (设置页脚的字体大小default 11) --footer-html* <url> (添加一个HTML页脚,后面是网址) --footer-left* <text> (左对齐的页脚文本) --footer-line* 显示一条线在页脚内容上) --footer-right* <text> (右对齐页脚文本) --footer-spacing* <real> (设置页脚和内容的距离) ./wkhtmltopdf --footer-right '[page]/[topage]' http://www.baidu.com baidu.pdf ./wkhtmltopdf --header-center '报表' --header-line --margin-top 2cm --header-line http://192.168.212.139/oma/ oma.pdf 表内容选项中 --toc-depth* <level> Set the depth of the toc (default 3) --toc-disable-back-links* Do not link from section header to toc --toc-disable-links* Do not link from toc to sections --toc-font-name* <name> Set the font used for the toc (default Arial) --toc-header-font-name* <name> The font of the toc header (if unset use --toc-font-name) --toc-header-font-size* <size> The font size of the toc header (default 15) --toc-header-text* <text> The header text of the toc (default Table Of Contents) --toc-l1-font-size* <size> Set the font size on level 1 of the toc (default 12) --toc-l1-indentation* <num> Set indentation on level 1 of the toc (default 0) --toc-l2-font-size* <size> Set the font size on level 2 of the toc (default 10) --toc-l2-indentation* <num> Set indentation on level 2 of the toc (default 20) --toc-l3-font-size* <size> Set the font size on level 3 of the toc (default 8) --toc-l3-indentation* <num> Set indentation on level 3 of the toc (default 40) --toc-l4-font-size* <size> Set the font size on level 4 of the toc (default 6) --toc-l4-indentation* <num> Set indentation on level 4 of the toc (default 60) --toc-l5-font-size* <size> Set the font size on level 5 of the toc (default 4) --toc-l5-indentation* <num> Set indentation on level 5 of the toc (default 80) --toc-l6-font-size* <size> Set the font size on level 6 of the toc (default 2) --toc-l6-indentation* <num> Set indentation on level 6 of the toc (default 100) --toc-l7-font-size* <size> Set the font size on level 7 of the toc (default 0) --toc-l7-indentation* <num> Set indentation on level 7 of the toc (default 120) --toc-no-dots* Do not use dots, in the toc 轮廓选项 --dump-outline <file> 转储目录到一个文件 --outline 显示目录(文章中h1,h2来定) --outline-depth <level> 设置目录的深度（默认为4） 页脚和页眉 * [page] 由当前正在打印的页的数目代替 * [frompage] 由要打印的第一页的数量取代 * [topage] 由最后一页要打印的数量取代 * [webpage] 通过正在打印的页面的URL替换 * [section] 由当前节的名称替换 * [subsection] 由当前小节的名称替换 * [date] 由当前日期系统的本地格式取代 * [time] 由当前时间，系统的本地格式取代 ./wkhtmltopdf --footer-right '[page]/[topage]' http://www.baidu.com baidu.pdf ./wkhtmltopdf --header-center '报表' --outline --header-line --margin-top 2cm --header-line http://www.hao123.com/ hao123.pdf ./wkhtmltopdf --header-left '[webpage]' --footer-center '测试([page]/[toPage])' http://www.baidu.com baidu.pdf

wkhtmltopdf中文不显示或者乱码问题 打开windows目录c:\Windows\fonts\simsun.ttc拷贝到 linux 服务器/usr/share/fonts/目录下,再次生成pdf中文显示正常点击下载SIMSUN.TTC