前端生成pdf,jspdf+html2Canvas的使用(vue)

html-css029

前端生成pdf,jspdf+html2Canvas的使用(vue),第1张

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,分页内容裂开的问题

把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都要在同一目录下