Vue3导出pdf方案
Vue3导出pdf方案
1.引入两个依赖
npm i html2canvas
npm i jspdf
2.在utils文件夹下新建htmlToPdf.js文件
// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
getPdf(title, loading) {
// loading = true;
console.log(loading);
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4, //按比例增加分辨率
}).then((canvas) => {
var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
var ctx = canvas.getContext('2d'),
a4w = 190,
a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
renderedHeight = 0;
while (renderedHeight < canvas.height) {
var page = document.createElement('canvas');
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
//用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page
.getContext('2d')
.putImageData(
ctx.getImageData(
0,
renderedHeight,
canvas.width,
Math.min(imgHeight, canvas.height - renderedHeight),
),
0,
0,
);
pdf.addImage(
page.toDataURL('image/jpeg', 1.0),
'JPEG',
10,
10,
a4w,
Math.min(a4h, (a4w * page.height) / page.width),
); //添加图像到页面，保留10mm边距
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage(); //如果后面还有内容，添加一个空页
}
// delete page;
}
//保存文件
pdf.save(title + '.pdf');
// loading = false;
console.log(loading);
});
},
};
export default htmlToPdf;
扩展：还可以传多个不同容器id
// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';
const htmlToPdf = {
getPdf(title, id) {
html2Canvas(
document.querySelector(id),
{
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4, //按比例增加分辨率
}
).then((canvas) => {
var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
var ctx = canvas.getContext('2d'),
a4w = 190,
a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
renderedHeight = 0;
while (renderedHeight < canvas.height) {
var page = document.createElement('canvas');
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
//用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page
.getContext('2d')
.putImageData(
ctx.getImageData(
0,
renderedHeight,
canvas.width,
Math.min(imgHeight, canvas.height - renderedHeight),
),
0,
0,
);
pdf.addImage(
page.toDataURL('image/jpeg', 1.0),
'JPEG',
10,
10,
a4w,
Math.min(a4h, (a4w * page.height) / page.width),
); //添加图像到页面，保留10mm边距
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage(); //如果后面还有内容，添加一个空页
}
// delete page;
}
});
},
};
export default htmlToPdf;
3.来到需要将vue转成pdf的页面
...
转成pdf
...
methods:
pdfFunc() {
// 调用htmlToPdf工具函数
htmlToPdf.getPdf('文档名称');
// 定时器模拟按钮loading动画的时间
setTimeout(() => {
}, 1000);
},
扩展:多个容器不同id
// 容器id="pdfCompany"
pdfFunc() {
this.loadingFlag = true; // 动画加载事件
// 调用htmlToPdf工具函数
htmlToPdf.getPdf('中小企业认定',"#pdfCompany");
// 定时器模拟按钮loading动画的时间
setTimeout(() => {
this.loadingFlag = false;
}, 1000);
}
jsPdf
介绍一下纯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]);
第一个参数： 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];
*删除某页pdf：*
let targetPage = pdf.internal.getNumberOfPages(); //获取总页
pdf.deletePage(targetPage); // 删除目标页
*保存pdf文档：*
pdf.save(`测试.pdf`);
Example：
1、导出一整页pdf文件，根据图片高度动态设置pdf的位置，*根据自己的数据格式组装导出方法*
/**
* 导出PDF一页 PDF中的页面宽度或高度不能超过14400个userUnit。jsPDF将宽度/高度限制为14400
* @param pageList
*/
const exportPdf = (pageList: any) => {
let [imgX, imgY] = [595.28, 841.89]; // a4纸尺寸[595.28, 841.89];
var pdfX = imgX
var pdfY = getLength(pageList);
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); //l：横向 p：纵向
let isAddpage = 0;
for (let [index, item] of pageList.entries()) {
for (let j = 0; j < item.imageList.length; j++) {
const image = item.imageList[j];
let imgHeight = imgX / (image.width / image.height);
pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight);
isAddpage += imgHeight;
}
}
pdf.save(`全部教材_${getTime()}.pdf`);
}
2、分页导出
const exportPdf = (pageList: any) => {
let [imgX, imgY] = [595.28, 841.89];
let pdf = new jsPDF('p', 'pt', 'a4');
for (let [index, item] of pageList.entries()) {
for (let j = 0; j < item.imageList.length; j++) {
const image = item.imageList[j];
let imgHeight = imgX / (image.width / image.height); //根据宽度计算高度
pdf.addImage(image.data, 'JPEG', 0, 0, imgX, imgHeight);
pdf.addPage();
}
}
let targetPage = pdf.internal.getNumberOfPages();
pdf.deletePage(targetPage); // 删除最后一页
pdf.save(`测试.pdf`);
}