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

首先,你需要安装该库:

npm install html2pdf.js

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>

导出后的PDF效果如下:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐