vue中将html导出成pdf

在Vue中将HTML导出为PDF文件，可以使用html2canvas和jspdf库。以下是一个简单的例子：

1. 安装依赖库：

npm install html2canvas jspdf

2. 在Vue组件中使用这些库：

<template>
  <div>
    <div id="content-to-print" ref="pdfContent">
      <!-- 这里是你想要导出为PDF的HTML内容 -->
      <h1>Hello, this is a PDF!</h1>
      <p>This content will be converted to PDF.</p>
    </div>
    <button @click="printPDF">Download PDF</button>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    async printPDF() {
      const content = this.$refs.pdfContent;
      const canvas = await html2canvas(content);
      const 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('download.pdf');
    },
  },
};
</script>

这段代码中，html2canvas用于将HTML元素渲染成canvas，然后jspdf用于创建PDF文件并添加canvas的内容。点击按钮后，printPDF方法被触发，HTML内容被转换成PDF，并提供下载。