一、实现思路:
1.使用html2canvas将html页面转为canvas
//安装
npm install html2canvas
//引用
import import html2canvas from 'html2canvas'
2.使用jsPdf将canvas图片转为pdf
//安装
npm install jsPdf
//引用
import jsPdf from 'jspdf'
二、jsPdf方法介绍
const pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
/**
第一个参数: l:横向 p:纵向
第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px")
第三个参数:可以是下面格式,默认为“a4”
- a0 - a10
- b0 - b10
- c0 - c10
- dl
- letter
- government-letter
- legal
- junior-legal
- ledger
- tabloid
- credit-card
默认为“a4”。如果您想使用自己的格式,只需将大小作为数字数组传递,例如[595.28, 841.89];
**/
三、使用示例
printPDF() {
window.pageYOffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
const domElement = document.getElementById('app')
let w = window.screen.availWidth;
let h = document.body.scrollHeight;
html2canvas(domElement,
{
allowTaint: true,
scale:1.5
}
)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png')
//jsPdf(orientation,)
const pdf = new jsPdf('p', 'pt', [w,h])
pdf.addImage(imgData, 'JPEG', 0, 0, w, h)
pdf.save('your-filename.pdf')
})
}
今天就更新到这,有什么想法欢迎一起讨论!!!