vue3-实现截图当前页并转化为pdf文件

一.下载所需两个库

npm install --save html2canvas
npm install --save jspdf

二.引入所需库

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

三.vue3使用示例

<template>
<div class="box" id="view">
//里面是你需要截图的html内容。此处省略。。
</div>
<div>
<button type="primary" @click="initData.event.savePdf">生成PDF</button>
</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
/***初始化数据***/
const initData = reactive({
formData:{},
/***事件区域***/
event:{
 savePdf: () => {
 //对指定容器进行截屏
      html2canvas(document.getElementById("view"), {
        useCORS: true, //是否尝试使用CORS从服务器加载图像
        backgroundColor: "#fff", //画布背景色（如果未在DOM中指定）。设置null为透明
      }).then((canvas) => {
        // 转化成 dataurL
        let imgData = canvas.toDataURL("image/png");
        const doc = new jsPDF({
          orientation: "portrait",
          unit: "px",
          format: "a4",
        });
        const imgProps = doc.getImageProperties(imgData);
        const pdfWidth = doc.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        doc.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
        doc.save("项目详情.pdf");
      });
 }
},

})
</script>

<style lang="scss" scoped>
//隔离样式区。。
</style>

四.html2canvas属性&&jspdf属性