async generatePDF() {
const element = this.$refs.contentToPrint; // 你想要转换成PDF的DOM元素
// 使用html2canvas将DOM元素转换成canvas
const canvas = await html2canvas(element);
const imgData = canvas.toDataURL('image/png');
// 创建PDF并添加图片
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: 'a4',
});
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('download.pdf'); // 保存PDF
},
// generatePDF() {
// const doc = new jsPDF()
// doc.text("Hello world!", 10, 10)
// doc.save("a4.pdf")
// },
<div>
<el-button type="primary" @click="generatePDF">生成PDF</el-button>
</div>
<div style="padding:20px 10px" ref="contentToPrint">
</div>
解决图片无法显示问题
async generatePDF() {
const element = document.getElementById('content'); // 你想要导出为PDF的DOM元素
const opts = {
scale: 4, // 缩放比例,提高生成图片清晰度
useCORS: true, // 允许加载跨域的图片
// allowTaint: false, // 允许图片跨域,和 useCORS 二者不可共同使用
tainttest: true, // 检测每张图片都已经加载完成
logging: true // 日志开关,发布的时候记得改成 false
}
const canvas = await html2canvas(element,opts);
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
const imgProps= pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('download.pdf');
},