Vue中转换HTML为PDF

1. 安装html2pdf.js

javascript 复制代码
npm install html2pdf.js

2. 组件中引入html2pdf.js

javascript 复制代码
import html2pdf from 'html2pdf.js'

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

javascript 复制代码
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. 触发转换的事件

javascript 复制代码
<template>
  <div>
    <button @click="convertHTMLToPDF">转换为PDF</button>
    <div id="html-content">
      <!-- 这里是你的HTML内容 -->
    </div>
  </div>
</template>
相关推荐
qq_5103515916 小时前
vw 和 clamp()
前端·css·html
沐雪架构师17 小时前
Docling将pdf转markdown以及与AI生态集成
人工智能·pdf
kevin 117 小时前
扫描件、PDF、图片都能比对!让文档差异无所遁形
大数据·人工智能·pdf
algonaut18 小时前
adobe acrobat 安装到使用再到PDF编辑【适合小白,只看一篇就够!!!】
java·开发语言·其他·pdf
小高00718 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible18 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua18 小时前
setup函数相关【3】
前端·javascript·vue.js
neon120419 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
写不出来就跑路20 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
李长鸿1 天前
vue3中的插槽和其他
vue.js