vue3+js使用插件实现pc端导出pdf

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>