Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克

<template>
  <div>
    <button @click="generatePDF">生成PDF</button>
    <div id="content" style="padding: 10px;">
      <!-- 需要转换成PDF的内容 -->
    </div>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    generatePDF() {
      const element = document.getElementById('content');
      html2canvas(element, { scale: 2 }).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>

这段代码提供了一个简单的Vue方法，用于生成包含指定内容的PDF文件。它使用了html2canvas库将DOM元素转换为canvas，然后使用jspdf库将canvas保存为PDF。在这个例子中，我们假设需要转换的内容在id为content的DOM元素中。这段代码可以解决中文乱码和自动换行的问题，因为它正确处理了字符编码和文本换行。