在Vue中，如何将页面直接转成PDF并下载？_vue-html2pdf

在Vue中，你可以使用html2pdf.js库来将HTML页面转成PDF格式。这个库可以在浏览器端运行，并且不需要服务器支持。

首先，你需要安装该库：

npm install html2pdf.js
1

html2pdf.js是一款JavaScript库，用于将HTML页面转换为PDF格式，并提供了许多配置项参数来控制转换的方式和输出结果。下面是html2pdf.js中几个常用的配置项参数及其含义：

• margin：控制页面边距（margin）的大小，顺序为上、右、下、左。
• filename：指定输出的PDF文件名，可以使用变量{datetime}插入当前日期时间。
• image：如果设置为’jpeg’或’png’，则将输出的PDF中的图片转换为JPEG或PNG格式。
• html2canvas：一个对象，用于传递给html2canvas()函数的配置选项，如scale、logging等。
• jsPDF：一个对象，用于传递给jsPDF()函数的配置选项，如orientation、unit等。
• pagebreak：一个CSS选择器，指定在哪些HTML元素之前进行分页操作，例如’h1’表示在每个<h1>元素之前添加分页符。
• enableLinks：是否将超链接转换为可点击的链接。
• enableStyles：是否应用CSS样式。
• watermark：一个对象，用于设置水印的相关信息，包括文本内容、字体大小、颜色、位置等。
• html2pdfserver：一个对象，用于指定html2pdf.js所连接的服务器地址和相关认证信息。

然后，在你的Vue组件中引入该库并编写一个方法来实现将页面转成PDF格式并下载下来的功能。以下是一个示例代码：

<template>
  <div id="pdf-content">
    <!-- 这里是你要转成PDF的页面内容 -->
  </div>
</template>

<script>
import html2pdf from 'html2pdf.js';

export default {
  name: 'PdfDownload',
  methods: {
    downloadPdf() {
      const element = document.getElementById('pdf-content');
      const opt = {
      	// 转换后的pdf的外边距分别为：上: 10px、右: 20px、下: 10px、左:20px
        margin:       [10, 20, 10, 20],
        filename:     'download.pdf',
        image:        { type: 'jpeg', quality: 1 },
        html2canvas:  { scale: 5 },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };
      
      // 调用html2pdf库的方法生成PDF文件并下载
      html2pdf().from(element).set(opt).save();
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

导出后的PDF效果如下：