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>
相关推荐
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰6 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半8 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
S. Dylan8 小时前
Edge浏览器打开PDF无法显示电子签章
edge·pdf
一马平川的大草原8 小时前
如何基于pdf2image实现pdf批量转换为图片
计算机视觉·pdf·文件拆分
m0_594526308 小时前
Python批量合并多个PDF
java·python·pdf