vue通过html2canvas+jspdf生成PDF问题全解(水印，分页，截断，多页，黑屏，空白，附源码)

在现代前端开发中，生成PDF文件是一个常见需求，特别是在使用Vue.js时。我们可以结合html2canvas和jsPDF这两个库，实现将网页内容以PDF形式导出的功能。以下是关于如何使用这两个库生成PDF的详细说明，包括水印、分页、截断、多页、黑屏和空白现象的解决方案。

1. 项目准备

首先，你需要安装html2canvas和jspdf这两个库。可以通过npm或cdn进行引入。

npm install html2canvas jspdf

2. 基本使用

在Vue组件中，我们可以使用html2canvas将要导出的元素转为canvas，然后用jsPDF将该canvas生成PDF。

<template>
  <div id="app">
    <div ref="content">
      <h1>这是要导出为PDF的内容</h1>
      <p>这里可以添加更多内容...</p>
    </div>
    <button @click="generatePDF">生成PDF</button>
  </div>
</template>

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

export default {
  methods: {
    generatePDF() {
      const element = this.$refs.content;
      html2canvas(element).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();

        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save('download.pdf');
      });
    },
  },
};
</script>

<style scoped>
/* 添加一些样式 */
</style>

3. 处理水印

如果你想在PDF中添加水印，可以在生成canvas之前，在内容上绘制水印。

generatePDF() {
  const element = this.$refs.content;
  html2canvas(element).then((canvas) => {
    const context = canvas.getContext('2d');
    context.font = '40px Arial';
    context.fillStyle = 'rgba(255, 0, 0, 0.3)';
    context.rotate(-0.2);
    context.fillText('水印', canvas.width / 4, canvas.height / 2);

    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('download.pdf');
  });
}

4. 处理分页和多页问题

为了处理长内容的分页问题，我们需要计算内容的高度并进行裁剪。

generatePDF() {
  const element = this.$refs.content;
  html2canvas(element).then((canvas) => {
    const pdf = new jsPDF();
    const contentWidth = pdf.internal.pageSize.getWidth();
    const contentHeight = pdf.internal.pageSize.getHeight();

    // 添加分页
    let imgData = canvas.toDataURL('image/png');
    let position = 0;

    while (position < canvas.height) {
      pdf.addImage(imgData, 'PNG', 0, position);
      position -= contentHeight;

      if (position < canvas.height) {
        pdf.addPage();
      }
    }

    pdf.save('download.pdf');
  });
}

5. 黑屏和空白问题

黑屏和空白现象通常是由于canvas元素未渲染完全。确保在html2canvas前，相关DOM元素已经可见，并且设置适当的选项。

html2canvas(element, { useCORS: true }).then((canvas) => {
  // 处理canvas生成PDF的逻辑
});

6. 附源码

下面是完整的Vue组件源码示例，综合了上述所有功能。

<template>
  <div id="app">
    <div ref="content" style="padding: 20px;">
      <h1>PDF导出示例</h1>
      <p>水印和分页处理示例。</p>
      <!-- 更多内容 -->
    </div>
    <button @click="generatePDF">生成PDF</button>
  </div>
</template>

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

export default {
  methods: {
    generatePDF() {
      const element = this.$refs.content;
      html2canvas(element).then((canvas) => {
        const pdf = new jsPDF();
        const contentWidth = pdf.internal.pageSize.getWidth();
        const contentHeight = pdf.internal.pageSize.getHeight();
        const imgData = canvas.toDataURL('image/png');
        let position = 0;

        while (position < canvas.height) {
          pdf.addImage(imgData, 'PNG', 0, position);
          position -= contentHeight;

          if (position < canvas.height) {
            pdf.addPage();
          }
        }

        pdf.save('download.pdf');
      });
    },
  },
};
</script>

<style scoped>
/* 添加样式 */
</style>

总结

通过以上方法，我们可以灵活地处理PDF生成过程中的水印、分页和显示问题。需要注意的是，跨域问题和canvas高度计算是确保PDF内容准确性的重要因素。在实际应用中，可能需要根据具体内容调整代码和逻辑。希望这篇文章能帮助你在项目中顺利实现PDF导出功能！