Vue中转换HTML为PDF

html2pdf.js的使用
滚动条内部未滚动出来显示的内容没有导出

使用

1. 安装html2pdf.js库

js 复制代码
npm install html2pdf.js

2. 组件中引入html2pdf.js库

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

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

版本1:(这个好像有问题)

js 复制代码
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文件
    },
  },
};

版本2:(使用这版)

js 复制代码
export default {
  methods: {
    convertHTMLToPDF() {
      const element = document.getElementById('html-content'); // 获取包含HTML内容的元素
      const pdf = html2pdf(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的单位、格式和方向
      });
    },
  },
};

4. 触发转换的事件

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

注意

1.样式要写行内样式,否则使用class等选择器绑定样式可能会导致导出的内容没有样式;

相关推荐
志存高远6612 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_24 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia1 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia2 小时前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学