最近公司遇见一个新的需求,将原生html页面一键转换成pdf文件,作为一个小白表示很懵,卡在了第一步,引入插件,下面就记录一下详细步骤,兴许以后还能用得上呢~
1.下载插件
我们需要引入两个插件,html2canvas和jsPdf
如果是原生js写的话可以通过script标签引入
1.1 引入html2canvas html2canvas官网
点击图片中的按钮,右键另存至项目内
html2canvas官网
1.12引入jsPdf jsPdf官网
方法1: https://www.npmjs.com/package/jspdf ,可以参考这里面的方法,
方法2: https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js 直接进去右键另存至项目 (推荐)
2.引入插件
在你的html页面内引入刚才下载的文件,路径看你放的位置,我是直接放在根目录内的
image.png
3 js内使用
重点:如果new jsPDF构造函数时报jspdf is not defiend 或者 jspdf is not a constructor
可以在开发者工具上打印一下window.jspdf 看jsPDF在哪一层,再具体应用
这种就需要这样调用: new jspdf.jsPDF()
image.png
导出一整页不分页型:
//在导出按钮上绑定这个函数:
function onDerive(){
let content=document.getElementById('pdfContent') //获取需要导出的节点
download(content); //导出函数
}
function download(content) {
html2canvas(content, {
allowTaint: true,
scale: 2 // 提升画面质量，但是会增加文件大小
}).then(function (canvas) {
/**jspdf将html转为pdf一页显示不截断，整体思路：
* 1. 获取DOM
* 2. 将DOM转换为canvas
* 3. 获取canvas的宽度、高度（稍微大一点）
* 4. 将pdf的宽高设置为canvas的宽高
* 5. 将canvas转为图片
* 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
*/
const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 将canvas转为base64图片
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
const pdfX = (contentWidth + 10) / 2 * 0.75;
const pdfY = (contentHeight + 500) / 2 * 0.75; // 500为底部留白
// 设置内容图片的尺寸，img是pt单位
const imgX = pdfX;
const imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
// 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
const PDF = new jspdf.jsPDF('', 'pt', [pdfX, pdfY]); //看看你的jspdf在哪里呀,我看其它教程都是直接var PDF = new jsPDF('', 'pt', [pdfX, pdfY])
// 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
PDF.save('信息.pdf')
})
}
分页型:
function onDerive() {
//分页,但是可能内容会被截断方案
html2canvas(document.getElementById('pdfContent')).then(function (canvas) { //获取需要导出的节点
let SmallPDF = document.getElementById('SmallPDF');
let content = SmallPDF.appendChild(canvas) //这句代码会将canvas截图生成一个元素节点,不需要可以用css隐藏
onrendered(content)
});
}
function onrendered(canvas) {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
const pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
let leftHeight = contentHeight;
//pdf页面偏移
let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = 592.28 / contentWidth * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jspdf.jsPDF('', 'pt', 'a4')
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('html转pdf测试.pdf');
}
