VUE JS 将html转成pdf 例子

mqiqe2024-06-28 12:25

在Vue.js中生成PDF文件，可以使用html2canvas和jspdf库。

安装依赖库

bash 复制代码

npm install html2canvas jspdf

在Vue组件中使用

javascript 复制代码

<template>
  <div>
    <button @click="generatePDF">生成PDF</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    generatePDF() {
      const element = document.body; // 或者任何你想转换为PDF的DOM元素
      html2canvas(element).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'px',
          format: 'a4',
        });
        const imgProps= pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('download.pdf'); // 保存的文件名
      });
    },
  },
};
</script>

这段代码中，定义了一个generatePDF方法，当按钮点击时，会将页面内容转换为canvas，然后转换为PDF，并提供下载。需要注意的是，转换的DOM元素可以根据实际需求进行选择。