vue3 将 HTML 网页内容生成为 PDF 文件

使用 html2pdf.js 实现
npmjs 地址:html2pdf.js
github 仓库地址:html2pdf.js

使用 html2pdf.js 的方法非常简单,只需要能获取到要生成 PDF 的 HTML 元素即可

安装

npm i html2pdf.js

引入

先在需要使用导出的页面引入

import html2pdf from "html2pdf.js";

使用

基本配置,页边距,文件名,生成图片类型和质量等信息,自行调整
具体配置项可以看 npmjs 的 html2pdf.js#Options 或 github 的 html2pdf.js#options

let opt = {margin: [0.5, 0.6],filename: "文件名",image: { type: "jpeg", quality: 0.98 },html2canvas: { scale: 3 },jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
};

基本的保存为 PDF 使用流程,使用 html2pdf 导出方法,设置opt导出配置,从node导出节点,保存
其他的工作流的方法可以看 npmjs 的 html2pdf.js#worker-api 或 github 的 html2pdf.js#worker-api

html2pdf().set(opt).from(node).save();

手动分页

在导入的节点内加入下面代码手动分页,在哪个节点后加表示在哪分页

<div class="html2pdf__page-break"></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/73303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统 --- 计算机系统引论

&#xff08;一&#xff09;操作系统的目的和作用 概念&#xff08;定义&#xff09; 操作系统 &#xff08; Operating System &#xff0c; OS &#xff09;是指控制和 管理 整个计算机系统的 硬件和软件 资源&#xff0c;并合理地组织调度计算机的工作和资源的分配&#…

数据分析面试题(2023.09.08)

数据分析流程 总体分为四层&#xff1a;需求层、数据层、分析层和结论层 一、统计学问题 1、贝叶斯公式复述并解释应用场景 公式&#xff1a;P(A|B) P(B|A)*P(A) / P(B)应用场景&#xff1a;如搜索query纠错&#xff0c;设A为正确的词&#xff0c;B为输入的词&#xff0c;那…

vue-elementPlus自动按需导入和主题定制

elementPlus自动按需导入 装包 -> 配置 1. 装包&#xff08;主包和两个插件包&#xff09; $ npm install element-plus --save npm install -D unplugin-vue-components unplugin-auto-import 2. 配置 在vite.config.js文件中配置&#xff0c;配置完重启&#xff08;n…

Leetcode.664 奇怪的打印机

题目链接 Leetcode.664 奇怪的打印机 hard 题目描述 有台奇怪的打印机有以下两个特殊要求&#xff1a; 打印机每次只能打印由 同一个字符 组成的序列。每次可以在从起始到结束的任意位置打印新字符&#xff0c;并且会覆盖掉原来已有的字符。 给你一个字符串 s &#xff0c;你…

数学建模--Seaborn库绘图基础的Python实现

目录 1.绘图数据导入 2. sns.scatterplot绘制散点图 3.sns.barplot绘制条形图 4.sns.lineplot绘制线性图 5.sns.heatmap绘制热力图 6.sns.distplot绘制直方图 7.sns.pairplot绘制散图 8.sns.catplot绘制直方图 9.sns.countplot绘制直方图 10.sns.lmplot绘回归图 1.绘图数…

React中函数式组件与类组件有何不同?

Function Component 与 Class Component 有何不同 目录 Function Component 与 Class Component 有何不同 文章核心观点&#xff1a; 解释一下&#xff1a; 总结&#xff1a; 文章核心观点&#xff1a; Function components capture the rendered values.函数式组件捕获…

【漏洞复现】深信服科技EDR平台存在任意用户登录漏洞

漏洞描述 深信服终端检测响应平台EDR,通过云网端联动协同、威胁情报共享、多层级响应机制,帮助用户快速处置终端安全问题,构建轻量级、智能化、响应快的下一代终端安全系统。 该EDR系统存在任意用户登录漏洞&#xff0c;攻击者通过漏洞可以登录系统后台并获取服务器的敏感信息…

3D印刷电路板在线渲染查看工具

从概念上讲&#xff0c;这是有道理的&#xff0c;因为PCB印制电路板上的走线从一个连接到下一个连接的路线基本上是平面的。 然而&#xff0c;我们生活在一个 3 维世界中&#xff0c;能够以这种方式可视化电路以及相应的组件&#xff0c;对于设计过程很有帮助。本文将介绍KiCad…

在ubuntu20.04上安装arm-linux-gcc 4.4.3

1下载地址 [http://www.friendlyelec.com.cn/download.asp] 2.将 arm-linux-gcc-4.4.3.tar.gz 拷贝到 /bin目录 无法拷贝怎么办&#xff1f; 出现这种情况是 Linux 拷贝文件时权限不够&#xff0c; 运行命令 sudo nautilus&#xff0c; 打开一个具有管理员权限的文件管理器&am…

# DevOps名词定义梳理

DevOps名词定义梳理 极限编程座右铭&#xff1a;如果它令你很受伤&#xff0c;那么就做更多的练习&#xff08;If it hurts, do it more often&#xff09; 经常人们会把这些名词用错&#xff1a; 构建&#xff1a;就是把源代码制成成品的过程&#xff0c;这个过程一般会有单元…

微电网的概念

微电网分布式控制理论与方法  顾伟等 微电网的概念和作用 微电网是由多种分布式电源、储能、负载以及相关监控保护装置构成的能够实现自我控制和管理的自治型电力系统&#xff0c;既可以与电网并网进行&#xff0c;也可以以孤岛运行。 分布式发电是指将容量在兆瓦以内的可再…

mysql接收list参数以及日期格式化

mysql接收list参数 List<MarketAnalysisCompanys> getCompanyReduceData(String companyId,List<String> labelNameList, String beginTime, String endTime);<select id"getCompanyReduceData" resultType"com.spang.wechat.entity.MarketAnaly…

原生JavaScript+PHP多图上传实现

摘要 很多场景下需要选择多张图片上传&#xff0c;或者是批量上传以提高效率&#xff0c;多图上传的需求自然就比较多了&#xff0c;本文使用最简单的XMLHttpRequest异步上传图片。 界面 上传示例 代码 index.html <!DOCTYPE html> <html><head><titl…

docker 部署vue

1&#xff1a; 首先部署nginx docker run --name nginx -d -p 88:80 nginx 2&#xff1a;访问 http://xxxxxxx:88/ 3: 进入nginx docker exec -it nginx /bin/sh 4: 回到vs&#xff0c;编译项目 npm run build 得到dist文件夹 5&#xff1a;创建docker 6&#xff1a; 将…

蚂蚁发布金融大模型:两大应用产品支小宝2.0、支小助将在完成备案后

9月8日&#xff0c;在上海举办的外滩大会上&#xff0c;蚂蚁集团正式发布金融大模型。据了解&#xff0c;蚂蚁金融大 模型基于蚂蚁自研基础大模型&#xff0c;针对金融产业深度定制&#xff0c;底层算力集群达到万卡规模。该大 模型聚焦真实的金融场景需求&#xff0c;在“认知…

2023 INCLUSION·外滩大会丨拓数派科技战略深度披露,大模型数据计算系统蓄势待发

近日&#xff0c;被亿欧网誉为最值得关注的全球化大模型数据计算科技新锐拓数派亮相在黄浦区世博园举行的2023 INCLUSION外滩大会。作为国际顶尖的科技盛会&#xff0c;来自全球各地的著名经济学家、诺奖得主、企业家和技术大咖们济济一堂&#xff0c;围绕“科技创造可持续未来…

无涯教程-JavaScript - IMLOG10函数

描述 IMLOG10函数以x yi或x yj文本格式返回复数的公共对数(以10为底)。可以从自然对数计算复数的公共对数,如下所示: $$\log_ {10}(x yi)(\log_ {10} e)\ln(x yi)$$ 语法 IMLOG10 (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you …

word文档如何引用参考文献

参考 word文档如何引用参考文献 说明

JavaScript事件处理

表单事件 表单事件在HTML表单中触发 (适用于所有 HTML 元素&#xff0c;但该HTML元素需在form表单内)&#xff1a; 案例演示1&#xff1a;当文本框获取焦点&#xff0c;文本框背景为红色&#xff0c;当文本框失去焦点&#xff0c;文本框背景为黄色 <!DOCTYPE html> <…

【Java】x-easypdf: 一种简单易用的PDF处理库

引言 在处理和生成PDF文档时&#xff0c;有许多库可供选择。其中&#xff0c;x-easypdf是一种简单易用的PDF处理库&#xff0c;可以帮助开发人员轻松地创建、编辑和操作PDF文档。本文将介绍x-easypdf的基本概念、安装方法、主要功能以及使用示例。 安装x-easypdf 要使用x-ea…