vue中将html导出成pdf
vue 中将页面 html 内容导出成 pdf 文件格式，使用 html2canvas 、jspdf 。
首先使用 html2canvas 将内容转换为图片，之后写入 pdf 。
1、引用
第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save
2、创建 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>
