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>
相关推荐
zhy81030223 分钟前
.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署
pdf·.net·excel
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
慧都小妮子1 小时前
Spire.PDF for .NET【页面设置】演示:打开 PDF 时自动显示书签或缩略图
java·pdf·.net
佚先森2 小时前
2024ARM网络验证 支持一键云注入引流弹窗注册机 一键脱壳APP加固搭建程序源码及教程
java·html
运维-大白同学2 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
星星会笑滴3 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
FØund4043 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish3 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue