1. html2canvas+jsPDF (text will be truncated):
Rendering HTML elements to a canvas object added to the PDF, cannot just use jsPDF, requires html2canvas or rasterizeHTML
Specific usage links of html2canvas+jsPDF
2. html2pdf (the content is not fully displayed + the text will be truncated):
Download or install html2pdf: official website
1. Place the document locally and use native js to reference and use it.
① Create a new html2pdf.jsfile named and copy the online content .
②Introduce js file:
// 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: {
// 引入html2pdf
html2pdf: "lay/extends/html2pdf",
}
}
})
2. Use npmto install and use:
npm install --save html2pdf.js
3. Use in native 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-quality
type: '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.html
unit: 'pt', // pt、mm、cm、in
format: 'a4',
orientation: 'portrait' // 纵向p，横向l
}
};
html2pdf().set(opt).from(document.getElementById('box')).save();
}
4. Effect:
3. print.js (content truncation: including but not limited to chart truncation and dynamic table row truncation):
Download or install PrintJs: official website
1. Place the document locally and use native js to reference and use it.
① Create a new print.jsfile named and copy the online content .
②Introduce js file:
// 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-js
print: "lay/extends/print",
}
}
})
2. Use npmto install and use:
npm install print-js --save
3. Use native 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;}
`
}
4. jsPDF-Autotable (only works on tables):
Download or install jsPDF-Autotable: This should be the official website, I can’t find anything else.
1. Place the document locally and use native js to reference and use it.
① Create a new autotable.jsfile named and copy the online content .
②Introduce js file:
// 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，可以看下面的图片1
exports('autotable',autotable);
})
// 其次进行自定义插件的引入
layui.define(['appsmenu'],function (exports) {
exports("conf", {
// 第三方扩展
extend: {
// 引入jsPDF-Autotable
autotable: "lay/extends/autotable",
}
}
})
Picture 1:
2. Use npmto install and use:
npm install jspdf -S
npm install jspdf-autotable -S
3. Use native 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')
}
4. pdfmake (only applicable to very simple page structures, no styles, the attempt failed):
pdfmake does not support Chinese by default, so you need to install font files
Download or install pdfmake and font js: official website
1. Place the document locally and use native js to reference and use it.
① Create a new pdfmake.min.jsfile named and copy the online content .
② Create a new vsfFonts.jsfile named and copy the online content .
③Introduce js file:
// 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. Use npmto install and use:
npm install pdfmake
3. Use native js:
// 点击下载按钮
document.getElementById("btn").onclick=function(){
var docDefinition = {
// 描述的对象 -- 内容的结构数组、样式文件的引入都在这里写，感觉不适合复杂的页面结构
content: "这里可以使用字符串，也可以使用数组",
defaultStyle: {
// 设置定义好的字体为默认字体
font: "字体名",
},
};
pdfMake.createPdf(docDefinition).download("下载的文件名", () => {
console.log("下载完成的回调");
})
}