Ⅰ 《html转pdf-----wkhtmltopdf踩坑总结》
最近公司给了个任务，差不多的流程就是接受json数据，然后最后生成图片。我想的办法是根据json数据生成html然后转成pdf。使用的语言是python。然后具体来说使用的工具就是使用python名为pdfkit的库去调用基于webkit的wkhtmltopdf。
目前来说html转pdf最主流的程序就是wkhtmltopdf，但是坑还是挺多的而且网上资源不是很丰富，所以写一篇踩坑总结。
##1. 无法读取本地文件
显示在html上好好的本地图片，到了pdf上就读取不出来，但是来源于网络（给一个url）的图片却能完美读出来。
后来发现，原来在上一个版本0.12.5是可以读取的，到了0.12.6不能读取了是因为其中的一个参数--enable-local-file-access变为了非默认。在python中改这个参数的方法是
然后再在后续调用wkhtmltopdf中加载这个option（我一开始想的是把value改成True，结果一直报错，吐了）
##2. 无法解析latex格式的公式
在html使用了MathJax提供的js去解析latex格式的数学公式，在html界面可以完美显示，但是到了pdf中就解析不了，然后我以为是没有添加'enable-javascript'的问题。结果加上之后还是不行。然后我发现又有一个参数叫做'no-stop-slow-scripts'的参数，可以等到js运行完毕之后再进行pdf的转化。结果还是不行。
然后我就在想会不会js在运行的时候出了什么问题，加上了'debug-javascripts'的参数。果然发现在调用MathJax提供的链接的时候发现这个链接已经过期了（我也不知道为啥过期了在html界面还能完美展示。。。），把js里的链接换成了
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML
完美解决
##3. 部分css失效
css3中的flex全部失效，所以大家得换一下！
当时遇到了一个讲的很好的博客，给大家分享一下，然后再放一个官方文档的链接
博客：https://www.jianshu.com/p/4d65857ffe5e
官方文档：https://wkhtmltopdf.org/usage/wkhtmltopdf.txt
Ⅱ vue中实现html页面导出word和pdf的办法
1.使用预先写好的与html相似的word文档模板，将用户输入的数据与读取出来的模板结合生成指定名称的docx文件
vue+elementUI导出数据为word文档
2.使用Jquery插件和file-save来生成word文档
vue 前端导出word、excel、pdf
1.使用html2canvas和JsPDF来生成pdf文件
html2canvas生成截图后，用JsPDF转为pdf文件
上面有，这是运用插件截图可能会产生的问题的解决方案
2.调用浏览器的打印方法生成pdf文件
vue 项目导出pdf两种方式
Ⅲ 前端html页面转成pdf格式并下载
目的： 前端将页面导出为pdf格式，主要用到 html2canvas 、 jspdf 两个插件，其实 html2canvas 这个插件就相当于将屏幕‘截’了一张图，当然也并不是真正的截图，通过遍历dom生成，所以其实就是张图片，虽然方法好用方便，但是也有一定的缺陷，那就是导出的pdf无法复制里面的内容。
react
Ⅳ 前端html数据生成pdf,要给后端传什么路径
前端通过传递给后端html_url，由后端服务器获取html文件进行渲染，生成pdf，然后将pdf上传云上服务器。根据发布的相关信息查询到，云上服务器存储html，前端通过传递给后端html_url，由后端服务器获取html文件进行渲染，生成pdf，然后将pdf上传云上服务器。选择pyppeteer，有如下依据，python官方库如xhtml2pdf只能处理类似富文本类的静态页面，而html需要js渲染，故借助浏览器是一种可行的实现方式，tornado是异步框架，pyppeteer是异步库匹配。
Ⅳ JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
本文实例讲述了JS实现的将html转为pdf功能。分享给大家供大家参考，具体如下：
<!DOCTYPE
html>
<html>
<head>
<title>jsPDF插件</title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8">
<script
src="https://code.jquery.com/jquery-git.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
</head>
<body>
<p
class="pdf-wrapper"
="to-pdf">HTML
content...<h1>中文</h1>
中国,汉字,测试:合同
模版
中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国</br>中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国中国....................<br/>
中国,汉字,测试:合同
模版
...................<br/>
计费
接口
....................<br/>
<img
src='http://www.jb51.net/images/logo.gif'/>
</p>
<script
type="text/javascript">
var
pdf
=
new
jsPDF('p','pt','a4');
pdf.internal.scaleFactor
=
1;
var
options
=
{
pagesplit:
true
};
//$('.pdf-wrapper')
pdf.addHTML(document.body,options,function()
{
pdf.save('web1111.pdf');
});
</script>
</body>
</html>
运行效果：
更多关于JavaScript相关内容可查看本站专题：《JavaScript扩展技巧总结》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:jsPDF导出pdf示例jsPDF生成pdf后在网页展示实例使用jspdf生成pdf报表phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)JS导出PDF插件的方法(支持中文、图片使用路径)js插件方式打开pdf文件(浏览器pdf插件分享)用Javascript检查Adobe
PDF插件是否安装的实现代码纯js实现html转pdf的简单实例(推荐)基于Phantomjs生成PDF的实现方法JavaScript+Java实现HTML页面转为PDF文件保存的方法JavaScript代码生成PDF文件的方法
Ⅵ js将网页导出成pdf（js 打印指定div内容）2020-09-02
<input type="button" id="button" value="点击打印"/>
<div id="div_print">
<p>打印此处内容</p>
</div>
<script type="text/javascript">
function printdiv(printpage){
var newstr=document.getElementById(printpage).innerHTML;
var oldstr=document.body.innerHTML;
document.body.innerHTML=newstr;
window.print();
document.body.innerHTML=oldstr;
return false;
}
window.onload=function(){
var bt=document.getElementById("button");
bt.onclick=function(){printdiv('div_print');}
}
</script>
html, body{
overflow:visible;
}
打印时另存为pdf模式打印后的内容可复制 默认为Microsoft Print to PDF 模式
Ⅶ js 如何把html转成PDF
把html转成PDF：
1.下载HTML2FPDF开源软件，将其放在你的网站根目录文件夹下，比如 /srv/httpd/htdocs/test/；
2.新建1.php文件,1.php中的代码如下：
<?php
require('html2fpdf.php');
$pdf=new HTML2FPDF();
$pdf->AddPage();
// yourfile.html 你要转化的HTML文件
$yourfile_html = "yourfile.html"
// yourfile.pdf 转化成功后的pdf文件名
$yourfile_pdf = "yourfile.pdf"
$fp = fopen($yourfile_html,"r");
$strContent = fread($fp, filesize($yourfile_html));
fclose($fp);
$pdf->WriteHTML($strContent);
$pdf->Output($yourfile_pdf );
echo "PDF 文件成功生成!";
3.将你要转化的yourfile.html文件也放在test目录下，随后在浏览器中访问1.php文件就可以把html文件转化成PDF文件了，
注意事项：1.php，yourfile.html和html2fpdf.php都要在同一目录下
Ⅷ 前端HTML页面转PDF（html2canvas+jspdf）
utils - htmlToPdf.js
main.js
1、如果在多个页面使用，给函数定义一个参数，参数为要导出页面部分的id。
将 '#pdfDom' 替换为参数即可
2、将导出文件的名称也作为参数传入函数
此种方式也可用于vue，尝试后可行，需要调节部分参数，但毕竟不太合适。
jQuery不需要调节。
https://github.com/zhangshaoliang/downLoadPDF
vue方式
jQuery方式
目前项目使用的是前端加后端方式，前端提供模板，echarts图表的话需要转为base64发送给后台。后台使用iText。目前存在的问题是后台不支持css3语法，只支持到css2，所以复杂的样式页面显示错乱，考虑个别页面使用纯前端实现。
网站导航
Ⅸ 前端生成pdf，jspdf+html2Canvas的使用(vue)
2、安装html2Canvas: npm install --save html2canvas
这里使用 iframe 嵌套需要转成pdf的html文件；
如果pdf内容是动态的，可以将html丢给后端，让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可，然后将整个html作为字符串传给前端，前端再使用iframe 的 srcdoc属性将内容渲染出来。
不存在分页内容裂开的情况，但对样式呈现不太友好，有时会出现内容偏移情况，时好时坏的，经过不断的尝试，发生偏移的时候，可以将html2Canvas的width写死，但是值具体是多少，需要你自己猜
分页会出现问题：比如图片裂开，表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight，一点点试出来合适的值（应该有更好的方法，但是技术有限）
1. 生成多页pdf，分页内容裂开的问题