vue 中将页面 html 内容导出成 pdf 文件格式，使用 html2canvas 、jspdf 。
首先使用 html2canvas 将内容转换为图片，之后写入 pdf 。
参考链接：vue页面导出pdf，预览并下载（pc端） - 简书
1、引用
第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save2、创建 exportToPdf.js ，放入导出方法
// exportToPdf.js
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
export function exportToPDF(fileName,elementId) {
// 根据元素ID获取要导出的元素
const element = document.getElementById(elementId);
if (!element) {
console.error('无法找到指定的元素');
return;
}
// 使用 html2canvas 将元素转换为 canvas
html2canvas(element).then(canvas => {
// 创建一个新的 jsPDF 实例
const pdf = new jsPDF('p', 'mm', 'a4');
// 将 canvas 转换为图片并添加到 PDF
const imgProps = canvas.toDataURL('image/png');
const imgPropsArr = imgProps.split(','), mimeType = imgPropsArr[0].match(/:(.*?);/)[1];
const img = new Image();
img.onload = function() {
// 获取图片的宽高
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (img.height * pdfWidth) / img.width;
// 添加图片到 PDF
pdf.addImage(imgProps, mimeType, 0, 0, pdfWidth, pdfHeight);
// 保存 PDF
pdf.save(fileName);
//预览
/* // 生成PDF的Blob对象
const pdfBlob = pdf.output('blob');
// 创建一个指向Blob对象的URL
const pdfUrl = URL.createObjectURL(pdfBlob);
// 打开新窗口预览PDF
const win = window.open();
win.document.write(`
<html>
<head>
<title>PDF Preview</title>
</head>
<body>
<embed src="${pdfUrl}" type="application/pdf" width="100%" height="100%">
</body>
</html>
`);*/
// 你可以选择在预览后释放URL，但这会关闭预览（如果浏览器支持）
//URL.revokeObjectURL(pdfUrl);
};
img.src = imgProps;
}).catch(error => {
console.error('导出PDF时发生错误:', error);
});
}3、vue中调用
<template>
<div style="text-align: center">
<div>
<div>
<button type="button" @click="pdfBtn">导出PDF</button>
</div>
<div id="pdfDom" >
<div>内容</div>
</div>
</div>
</div>
</template>
<script>
// 导入exportToPDF函数
import { exportToPDF } from '@/utils/feature/exportToPdf';
export default {
name: "exportpdf",
data(){
return{
htmlTitle:'页面导出PDF文件名',
}
},
methods:{
pdfBtn(){
exportToPDF(this.htmlTitle,'pdfDom');
},
}
}
</script>
<style scoped>
</style>-- 更新，上面方法测试发现仅能导出一页的内容，找到了导出多页的方法
原理：获取需要导出内容页面的总高度，根据A4纸张的高度，pdf中循环添加多页，直到全部绘制结束后导出pdf。
缺点：很多地方强制截断了，看起来很别扭，而且页边距也不好控制。
methods: {
async exportToPDF2() {
const content = document.getElementById('pdfDom');
// 获取页面高度和宽度（这里需要调整以适应你的内容）
const pageHeight = content.scrollHeight || content.clientHeight;
const pageWidth = content.scrollWidth || content.clientWidth;
// 创建一个新的 jsPDF 实例
const pdf = new jsPDF('p', 'mm', 'a4'); // 'p' 代表 portrait（纵向），'mm' 代表毫米，'a4' 代表 A4 纸张大小
// 定义内容的高度和宽度，以及每页的高度（这里需要调整以适应你的内容）
const contentLeft = 0; // 内容左边距
const contentTop = 0; // 内容上边距
const contentWidth = pageWidth - 2 * contentLeft; // 内容宽度（减去左右边距）
// 假设的页面尺寸和边距
const pageSize = {
width: 595.28, // A4 纸宽度，单位：点（1英寸 = 72点）
height: 841.89 // A4 纸高度，单位：点
};
// 计算当前页面可以容纳的内容高度
const contentHeight = pageSize.height - contentTop;
const imgProps = { scale: 1 }; // 用于 html2canvas 的图像属性
let position = 0; // 初始化内容在 PDF 中的位置
let y = contentTop; // 初始化 PDF 页面上的 y 坐标
// 循环直到所有内容都被导出
while (position < pageHeight) {
// 计算当前页面的内容高度（可能需要调整以确保内容不会溢出）
const pageContentHeight = (y + contentHeight > pageHeight) ? pageHeight - y : contentHeight;
// 使用 html2canvas 捕获当前页面的内容
const canvas = await html2canvas(content, {
// 你可以在这里添加更多的 html2canvas 配置选项
height: pageContentHeight,
width: contentWidth,
x: 0,
y: position,
scale: 1,
...imgProps,
});
// 将 canvas 添加到 PDF 页面中
const imgData = canvas.toDataURL('image/png');
const imgPropsPDF = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgPropsPDF.height * pdfWidth) / imgPropsPDF.width;
pdf.addImage(imgData, 'PNG', pdfWidth, y+pdfHeight, pdfWidth, pdfHeight);
// 更新 y 坐标以便下一页的内容
y += pdfHeight + 10; // 10 是页面间的间距，可以根据需要调整
// 如果内容超出了当前页面，则添加新页面
if (y > pdfHeight) {
if(position+contentHeight < pageHeight) {
pdf.addPage();
}
y = contentTop;
position += contentHeight; // 更新内容在原始 HTML 中的位置
}
}
// 保存 PDF
pdf.save('exported.pdf');
}
}