当前位置: 首页 > news >正文

纯前端 -- html转pdf插件总结

一、html2canvas+jsPDF(文字会被截断):

将HTML元素呈现给添加到PDF中的画布对象,不能仅使用jsPDF,需要html2canvas或rasterizeHTML

html2canvas+jsPDF的具体使用链接

二、html2pdf(内容显示不全+文字会被截断):

下载或者安装html2pdf:官网

1、将文档放在本地,用原生js进行引用和使用。

① 新建一个名为 html2pdf.js 的文件,并且将线上的内容进行复制。
② 引入 js 文件:

// js直接引入 -- 未尝试
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.js"></script>// layui使用
// 首先在html2pdf.js文件中添加exports
layui.define([],function(exports){// 复制的内容...exports('html2pdf',html2pdf);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方扩展extend: {// 引入html2pdfhtml2pdf: "lay/extends/html2pdf",}}
})

2、使用 npm 进行安装使用:

npm install --save html2pdf.js

3、在原生js中使用:

// 点击下载按钮
document.getElementById("btn").onclick=function(){let opt = {margin: 1,  // pdf外边距filename:  'pdf生成'+'.pdf', // 导出的pdf名称image: { // 图片的类型和质量,详情: https://github.com/eKoopmans/html2pdf.js#image-type-and-qualitytype: 'jpeg',quality: 0.98  // 取0-1,默认0.95,仅适用  jpeg/webp},html2canvas: {scale: 1,dpi: 92,},jsPDF: { // 详情:http://www.rotisedapsales.com/snr/cloud2/website/jsPDF-master/docs/jsPDF.htmlunit: 'pt', // pt、mm、cm、informat: 'a4', orientation: 'portrait' // 纵向p,横向l}};html2pdf().set(opt).from(document.getElementById('box')).save();
}

4、效果:

在这里插入图片描述

三、print.js(内容截断:包括不限于图表截断、动态表格行截断):

下载或者安装PrintJs:官网

1、将文档放在本地,用原生js进行引用和使用。

① 新建一个名为 print.js 的文件,并且将线上的内容进行复制。
② 引入 js 文件:

// js直接引入 -- 未尝试
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/print-js/1.6.0/print.js"></script>// layui使用
// 首先在print.js文件中添加exports
layui.define([],function(exports){// 复制的内容...exports('print',print);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方扩展extend: {// 引入print-jsprint: "lay/extends/print",}}
})

2、使用 npm 进行安装使用:

npm install print-js --save

3、原生js使用:

// 点击下载按钮
document.getElementById("btn").onclick=function(){printJS({printable: 'box', // 数据源:pdf or image的url,html类型则填打印区域元素id,json类型则是数据object。type: 'html', // 默认pdf,可选类型:pdf, html, image, json// header: '暂时不要标题', // 应用于页面顶部标题文本。targetStyles: ['*'],scanStyles: false, 	//此属性默认为true,printJs会自动扫描当前html结构所用的样式表style: stringCssFunc(), // 打印的内容是没有css样式的,此处需要string类型的css样式
})
}var stringCssFunc = function() {return `@page {margin:0 10mm};body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0);}a:active,a:hover{outline:0}img{display: inline-block; border: none; vertical-align: middle;}li{list-style:none;}table{border-collapse: collapse; border-spacing: 0;}h1,h2,h3{font-weight: 400;}h4, h5, h6{font-size: 100%; font-weight: 400;}button,input,select,textarea{font-size: 100%; }input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;}pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}body{line-height: 24px; font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;}hr{height: 1px; margin: 10px 0; border: 0; clear: both;}a{color: #333; text-decoration:none; }a:hover{color: #777;}a cite{font-style: normal; *cursor:pointer;}`
}

四、jsPDF-Autotable(只对表格起作用):

下载或者安装jsPDF-Autotable:这个应该是官网,找不到别的了

1、将文档放在本地,用原生js进行引用和使用。

① 新建一个名为 autotable.js 的文件,并且将线上的内容进行复制。
② 引入 js 文件:

// js直接引入 -- 未尝试
<script type="text/javascript" src="https://cdn.staticfile.org/jspdf-autotable/3.5.31/jspdf.plugin.autotable.js"></script>// layui使用
// 首先在autotable.js文件中添加exports
layui.define([],function(exports){// 复制的内容...// 将复制的内容引出的default改为autotable,可以看下面的图片1exports('autotable',autotable);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方扩展extend: {// 引入jsPDF-Autotableautotable: "lay/extends/autotable",}}
})

图片1:
在这里插入图片描述

2、使用 npm 进行安装使用:

npm install jspdf -Snpm install jspdf-autotable -S

3、原生js使用:

// 点击下载按钮
document.getElementById("btn").onclick=function(){const doc = new jsPDF()// 当前的dom元素,应该是table元素上面的类名,table里面包含th、tr、td等// 如果使用除了table、th、tr、td之外的元素,那么将会报错,或者打印的是空白autoTable(doc, { html: '#box' })doc.save('下载的文件.pdf')
}

四、pdfmake(只适用很简单的页面结构,没有什么样式,尝试失败):

pdfmake默认不支持中文,所以需要安装字体文件

下载或者安装pdfmake及字体js:官网

1、将文档放在本地,用原生js进行引用和使用。

① 新建一个名为 pdfmake.min.js 的文件,并且将线上的内容进行复制。
② 新建一个名为 vsfFonts.js的文件,并且将线上的内容进行复制。
③ 引入 js 文件:

// js直接引入 -- 未尝试
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

2、使用 npm 进行安装使用:

npm install pdfmake

3、原生js使用:

// 点击下载按钮
document.getElementById("btn").onclick=function(){var docDefinition = { // 描述的对象 -- 内容的结构数组、样式文件的引入都在这里写,感觉不适合复杂的页面结构content: "这里可以使用字符串,也可以使用数组",defaultStyle: {// 设置定义好的字体为默认字体font: "字体名",},};pdfMake.createPdf(docDefinition).download("下载的文件名", () => {console.log("下载完成的回调");})
}

五、pdf-lib(没看懂)

下载或者安装pdf-lib:官网

六、PDFKit、Puppeteer、wkhtmltopdf、PhantomJS都是在服务器端调用的。

相关文章:

纯前端 -- html转pdf插件总结

一、html2canvasjsPDF&#xff08;文字会被截断&#xff09;&#xff1a; 将HTML元素呈现给添加到PDF中的画布对象&#xff0c;不能仅使用jsPDF&#xff0c;需要html2canvas或rasterizeHTML html2canvasjsPDF的具体使用链接 二、html2pdf&#xff08;内容显示不全文字会被截断…...

数据结构和算法基础

巩固基础&#xff0c;砥砺前行 。 只有不断重复&#xff0c;才能做到超越自己。 能坚持把简单的事情做到极致&#xff0c;也是不容易的。 数据结构和算法 程序 数据结构算法 数据结构是算法的基础 问题1&#xff1a;字符串匹配问题。str1 是否完全包含 str2 1&#xff09;暴…...

JS二维数组转化为对象

将二维数组转化为对象的形式 转之前的数据&#xff1a; 转之后&#xff1a; const entries new Map([[foo, bar],[baz, 42],[beginNode, 202212151048010054],[beginNode, 202212151048447710],]); console.log(entries)const obj Object.fromEntries(entries);console.lo…...

通过 EPOLL 解决客户端同时连接多服务器的问题

项目需求是 程序上 同时配置了多个服务端 设备 每隔一段时间需要 比如1分钟 连一下服务器看下是否连通 并将结果上报给平台 原来是用线程池来做的 具体大概就是 定时器到了之后 遍历设备列表 找到设备之后 通过 socket连接 发送一个指令 等待服务器返回 用来检查是…...

JavaScript数据结构【进阶】

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录 使用 splice() 添加元素使用 slice() 复制数组元素使用展开运算符复制数组使用展开运算符合并数组使用 indexOf() 检查元素是否存在使用 for 循环遍历数组中的全部元素创建复杂的多维数组将键值对添加到对象…...

jQuery编程学习3(jQuery 其他方法: jQuery 拷贝对象、 jQuery 多库共存、jQuery 插件)

目录 jQuery 其他方法 1. jQuery 拷贝对象 $.extend()方法 2. jQuery 多库共存 问题概述&#xff1a; 客观需求&#xff1a; jQuery 解决方案&#xff1a;&#xff08;两种方式&#xff09; 3. jQuery 插件 jQuery 插件常用的网站&#xff1a; jQuery 插件使用步骤&…...

jvm——垃圾回收机制(GC)详解

开始之前有几个GC的基本问题 什么是GC&#xff1f; GC 是 garbage collection 的缩写&#xff0c;意思是垃圾回收——把内存&#xff08;特别是堆内存&#xff09;中不再使用的空间释放掉&#xff1b;清理不再使用的对象。 为什么要GC&#xff1f; 堆内存是各个线程共享的空间…...

计算机组成原理-笔记-第七章

目录 七、第七章——输入输出系统 1、IO设备与IO控制方式 &#xff08;1&#xff09;控制方式&#xff08;查询&#xff0c;中断&#xff0c;DMA&#xff09; &#xff08;2&#xff09;通道控制 &#xff08;3&#xff09;IO系统 &#xff08;4&#xff09;总结 2、外设…...

【Linux】网络基础2

文章目录 网络基础21. 应用层1.1 协议1.2 HTTP 协议1.2.1 URL1.2.2 urlencode和urldecode1.2.3 HTTP协议格式1.2.4 HTTP的方法1.2.5 HTTP的状态码1.2.6 HTTP 常见的header1.2.7 最简单的HTTP服务器 2. 传输层2.1 端口号2.1.1 端口号范围划分2.1.2 认识知名端口号2.1.3 netstat2…...

​可视化绘图技巧100篇进阶篇(四)-三维簇状柱形图(3D Clustered Bar Chart)

目录 前言 适用场景 图例 柱形图 一、柱形图的特点 二、柱形图的类型...

架构设计第八讲:架构 - 理解架构的模式2 (重点)

架构设计第八讲&#xff1a;架构 - 理解架构的模式2 (重点) 本文是架构设计第8讲&#xff1a;架构 - 理解架构的模式2&#xff0c;整理自朱晔的互联网架构实践心得, 他是结合了 微软给出的云架构的一些模式的基础上加入他自己的理解来总结互联网架构中具体的一些模式。我在此基…...

Java中的Maven Shade插件是什么?

Maven Shade插件是一个非常有用的Maven插件&#xff0c;它可以帮助你在构建项目时打包所有依赖项&#xff0c;并将其打包到一个单独的JAR文件中。这对于在构建过程中使用多个依赖项的项目非常有用&#xff0c;因为它可以让你避免在每个依赖项中都包含所有依赖项&#xff0c;从而…...

ffmpeg的bpp是什么?

例如&#xff1a; AV_PIX_FMT_YUV420P, ///< planar YUV 4:2:0, 12bpp, (1 Cr & Cb sample per 2x2 Y samples) AV_PIX_FMT_YUYV422, ///< packed YUV 4:2:2, 16bpp, Y0 Cb Y1 Cr AV_PIX_FMT_RGB24, ///< packed RGB 8:8:8, 24bpp, RGBRGB... AV_PIX_FMT_BGR24, …...

【C# 基础精讲】类和对象的概念

在面向对象编程&#xff08;Object-Oriented Programming&#xff0c;OOP&#xff09;中&#xff0c;类和对象是两个核心概念&#xff0c;用于描述和实现现实世界中的实体和关系。OOP 是一种编程范式&#xff0c;通过将数据和操作封装为对象来组织和管理代码&#xff0c;使得代…...

微信ipad实现批量添加联系人及批量分组

GEWE框架官方网站 geweapi.com 点击访问即可 搜索 小提示&#xff1a; 添加联系人必要接口搜索返回的V3 V4用于添加联系人 请求URL&#xff1a; http://域名地址/api/contacts/search 请求方式&#xff1a; POST 请求头&#xff1a; Content-Type&#xff1a;application/…...

Highcharts引入

Highcharts是和jQuery一起使用的&#xff0c;所以需要下载好jQuery jQuery下载方式&#xff1a;访问&#xff1a;http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js&#xff0c;然后全选复制到自己新建的txt文档中&#xff0c;最后把扩展名改为js。 Highcharts下载方式&…...

腾讯云轻量和CVM有什么区别?不都是服务器吗?

腾讯云轻量服务器和云服务器有什么区别&#xff1f;为什么轻量应用服务器价格便宜&#xff1f;是因为轻量服务器CPU内存性能比云服务器CVM性能差吗&#xff1f;轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境&#xff0c;云服务器CV…...

Android高通8.1 Selinux问题

1、最近客户提了一个需求&#xff0c;说要在user版本上面切分辨率&#xff0c;默认屏幕分辨率是2.5 k 执行adb shell指令之后变成 4k 然后adb shell wm size可以查看 2、一开始我能想到就是在文件节点添加权限&#xff0c;这里不管是mtk还是qcom&#xff08;高通平台&#xff…...

python图片爬虫

#!/usr/bin/env python # -*- coding:utf-8 -*- import argparse import os import re import sys import urllib import json import socket import urllib.request import urllib.parse import urllib.error # 设置超时 import timetimeout 5 socket.setdefaulttimeout(time…...

SpringBoot系列---【SpringBoot在多个profiles环境中自由切换】

SpringBoot在多个profiles环境中自由切换 1.在resource目录下新建dev&#xff0c;prod两个目录&#xff0c;并分别把dev环境的配置文件和prod环境的配置文件放到对应目录下&#xff0c;可以在配置文件中指定激活的配置文件&#xff0c;也可以默认不指定。 2.在pom.xml中最后位置…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

python可视化:俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

MeanFlow:何凯明新作,单步去噪图像生成新SOTA

1.简介 这篇文章介绍了一种名为MeanFlow的新型生成模型框架&#xff0c;旨在通过单步生成过程高效地将先验分布转换为数据分布。文章的核心创新在于引入了平均速度的概念&#xff0c;这一概念的引入使得模型能够通过单次函数评估完成从先验分布到数据分布的转换&#xff0c;显…...

开疆智能Ethernet/IP转Modbus网关连接鸣志步进电机驱动器配置案例

在工业自动化控制系统中&#xff0c;常常会遇到不同品牌和通信协议的设备需要协同工作的情况。本案例中&#xff0c;客户现场采用了 罗克韦尔PLC&#xff0c;但需要控制的变频器仅支持 ModbusRTU 协议。为了实现PLC 对变频器的有效控制与监控&#xff0c;引入了开疆智能Etherne…...

ubuntu清理垃圾

windows和ubuntu 双系统&#xff0c;ubuntu 150GB&#xff0c;开发用&#xff0c;基本不装太多软件。但是磁盘基本用完。 1、查看home目录 sudo du -h -d 1 $HOME | grep -v K 上面的命令查看$HOME一级目录大小&#xff0c;发现 .cache 有26GB&#xff0c;.local 有几个GB&am…...