Vue中转换HTML为PDF

最新推荐文章于 2024-10-21 10:43:59 发布

new code Boy

最新推荐文章于 2024-10-21 10:43:59 发布

阅读量2.3k

点赞数 8

文章标签： vue.js html pdf

本文链接：https://blog.csdn.net/qq_46344419/article/details/135151645

版权

1. 安装html2pdf.js库

npm install html2pdf.js

2. 组件中引入html2pdf.js库

import html2pdf from 'html2pdf.js'

3. 创建方法来处理HTML转PDF的逻辑

export default {
  methods: {
    convertHTMLToPDF() {
      const element = document.getElementById('html-content'); // 获取包含HTML内容的元素
      const pdf = html2pdf().fromHTML(element, {
        margin: 1, // 设置边距（以毫米为单位）
        filename: 'example.pdf', // 设置生成的PDF文件名
        image: { type: 'jpeg', quality: 0.98 }, // 设置图片质量
        html2canvas: { dpi: 192, letterRendering: true }, // 设置canvas渲染选项
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }, // 设置生成的PDF的单位、格式和方向
      });
      pdf.save(); // 保存生成的PDF文件
    },
  },
};

4. 触发转换的事件

<template>
  <div>
    <button @click="convertHTMLToPDF">转换为PDF</button>
    <div id="html-content">
      <!-- 这里是你的HTML内容 -->
    </div>
  </div>
</template>