1.安装jspdf插件：npm install jspdf --save
2.安装html2canvas插件：npm install html2canvas --save
3.代码：
<el-row>
<el-button type="primary" @click="downloadPDF">导出PDF</el-button>
</el-row>
<div class="mainDiv" id="pdfDom">
打印内容
</div>
<script setup>
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import { ElLoading } from "element-plus"
function downloadPDF(){
let loadingInstance = ElLoading.service({
lock: true,
text: "正在下载，请耐心等待",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
target: document.querySelector("#futureTransferDialog"),
})
var title = 'DPF标题'
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true,
taintTest: false,
useCORS: true,
y:10, // 对Y轴进行裁切
// width:1200,
// height:5000,
dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
scale: 4 //按比例增加分辨率
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
})
loadingInstance.close()
}
</script>
标签：插件,canvas,js,html2canvas,let,vue3,leftHeight,PDF From： https://www.cnblogs.com/ai01/p/17997524