【Vue2】vue指定页面div保存为pdf、vue指定页面内容转为文件流上传到后端、js指定div页面转为pdf文件

在Vue2中，可以使用html2canvas和jspdf库将指定页面内容保存为PDF。以下是一个简单的例子：

1. 安装依赖：

npm install html2canvas jspdf

2. 在Vue组件中使用：

<template>
  <div>
    <div ref="pdfContent">
      <!-- 这里是你想要转换成PDF的内容 -->
    </div>
    <button @click="exportPDF">导出为PDF</button>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    exportPDF() {
      const content = this.$refs.pdfContent;
      html2canvas(content).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>

这段代码中，html2canvas将指定的DOM元素转换成canvas，然后jspdf将canvas保存为PDF，并提供了一个下载按钮来触发这个转换过程。你可以根据需要调整页面格式、图片质量等参数。