utils - htmlToPdf.js
main.js
1、如果在多个页面使用,给函数定义一个参数,参数为要导出页面部分的id。
将 '#pdfDom' 替换为参数即可
2、将导出文件的名称也作为参数传入函数
此种方式也可用于vue,尝试后可行,需要调节部分参数,但毕竟不太合适。
jQuery不需要调节。
https://github.com/zhangshaoliang/downLoadPDF
vue方式
jQuery方式
目前项目使用的是前端加后端方式,前端提供模板,echarts图表的话需要转为base64发送给后台。后台使用iText。目前存在的问题是后台不支持css3语法,只支持到css2,所以复杂的样式页面显示错乱,考虑个别页面使用纯前端实现。
网站导航
把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都要在同一目录下
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两种方式