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>
相关推荐
Senar31 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Sherlock Ma2 小时前
PDFMathTranslate:基于LLM的PDF文档翻译及双语对照的工具【使用教程】
人工智能·pytorch·语言模型·pdf·大模型·机器翻译·deepseek
全栈老李技术面试3 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog3 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
我爱吃朱肉4 小时前
HTMLcss实现网站抽奖
css·html
乌夷4 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
街尾杂货店&4 小时前
HTML word属性
前端·html
工呈士4 小时前
HTML与安全性:XSS、防御与最佳实践
前端·html·xss
苹果酱05675 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计