介绍一下纯
jspdf用法,将一个图片列表
导出为
pdf文件,根据图片宽高计算在
pdf中的位置
jsPDF 是一个基于HTML5的客户端解决方案,用于
生成各种用途的
PDF 文档。
官网地址:https://rawgit.com/MrRio/
jsPDF/master/docs/
1、安装:npm install
jspdf
2、引入:import
jsPDF from "
jspdf"
3、使用:
let
pdf = new
jsPDF('p', 'pt', [
pdfX,
pdfY]);
使用html2canvas和jspdf可以将Vue页面导出为PDF文件。具体步骤如下:
1. 安装html2canvas和jspdf依赖:npm install html2canvas jspdf --save
2. 在Vue组件中引入html2canvas和jspdf:import html2canvas from 'html2canvas'; import jsPDF from 'jspdf';
3. 编写导出PDF的方法,例如:
exportPdf() {
const dom = document.querySelector('#pdfDom'); // 获取需要导出的DOM节点
html2canvas(dom).then(canvas => {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
const pageHeight = contentWidth / 592.28 * 841.89;
let leftHeight = contentHeight;
let position = 0;
const imgWidth = 595.28;
const imgHeight = 592.28 / contentWidth * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jsPDF('', 'pt', 'a4');
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('导出的PDF文件名.pdf');
4. 在需要导出PDF的地方调用exportPdf方法即可。