这里要用到html2canvas将document DOM节点转换为图片,并下载到本地_你挚爱的强哥的博客-CSDN博客前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件_你挚爱的强哥的博客-CSDN博客。会自动创建一个html文件。https://blog.csdn.net/qq_37860634/article/details/131752136
jspdf插件的官网和GitHub了解下
jsPDFGenerate professional PDFs easily with jsPDF, the open-source solution for PDF generation. Create event tickets, reports, certificates, and more in minutes with our intuitive interface.https://parall.ax/products/jspdfGitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.Client-side JavaScript PDF generation for everyone. - GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.https://github.com/parallax/jsPDF安装先
npm install jspdf --save
引用
import { jsPDF } from "jspdf";
用例代码
<template>
<div>
<h1 style="font-size: 100px;">自定义下载PDF</h1>
<el-button type="primary" ref="btn" @click="downloadImg({ dom: $el, fileName: '自定义.pdf' })">下载当前网页为pdf</el-button>
</div>
</template>
<script>
import html2canvas from 'html2canvas'; // npm install --save html2canvas (官网:https://html2canvas.hertzen.com)
import { jsPDF } from "jspdf"; // npm install jspdf --save (官网:https://parall.ax/products/jspdf https://github.com/parallax/jsPDF)
export default {
methods: {
downloadImg({ dom, fileName = '', pdfWidth, pdfHeigth, } = {}) {
html2canvas(dom).then(canvas => new jsPDF('l', 'pt', [pdfWidth || innerWidth, pdfHeigth || innerHeight]).addImage(canvas, 'PNG', 0, 0, canvas.width, canvas.height).save(fileName));
},
}
};
</script>