vue3 ts 导出PDF jsPDF

jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。

1、安装：npm install jspdf

                 npm install --save html2canvas

2、引入：import jsPDF from "jspdf" 

                import html2canvas from 'html2canvas'

3、使用

 
 
 
<script lang="ts" setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
 
  // 获取需要转换为PDF的元素 ref
const chartRef = ref()
const handelChangeTime = () => {
  
  // 将元素转换为canvas对象
  html2canvas(chartRef.value).then((canvas) => {
    // 将canvas对象转换为图像
    const imgData = canvas.toDataURL('image/png')
    const pdf = new jsPDF()
    const imgProps = pdf.getImageProperties(imgData)
    const pdfWidth = pdf.internal.pageSize.getWidth()
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
    // 将图像添加到PDF文件中
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
       // 保存PDF文件
    pdf.save('exported.pdf')
  })
}
script>
 
<style lang="less" scoped>style>