pdfmake 导出PDF(中文+图片)
2017-09-16 本文已影响2082人
Mr_欢先生
1.pdfmake的基本使用方法可以参考：
2.案例测试
说明：导出中文格式的pdf并且包含图片，步骤如下：
-
导入js文件
pdfMake案例地址github地址
- pdfmake.js
- vfs_fonts.js（案例中已经解决中文乱码问题，以后可直接引用该文件）
-
pdfMake.js
用于获取pdf.jsp文件中传过来要导出的内容，并且导出pdf，还可以执行回调函数
function pdfmake(content) {
var dd = content;
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
微软雅黑: {
normal: '微软雅黑.ttf',
bold: '微软雅黑.ttf',
italics: '微软雅黑.ttf',
bolditalics: '微软雅黑.ttf',
}
};
pdfMake.createPdf(dd).download("导出的PDF", function () {
});
}
-
插入图片
在插入图片时，pdfmake要求现将图片转换为Data URL才可以，而pdfmake允许直接指定路径，但是却是有条件的，必须在node.js作为服务器才可以。
下面代码工具用于转换图片为Data URL，并且将内容导出pdf
pdf.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>
<script src='js/jquery-3.2.0.min.js'></script>
<script src='build/pdfMake.js'></script>
<title>学生页面导出</title>
</head>
<body>
<div id="div2">div2的内容</div>
<button onclick="demo()">导出PDF</button>
</body>
<script type="text/javascript">
function demo() {
//图片格式转换
var x = new ImageDataURL(["img/303733274.jpg"]);
x.oncomplete = function () {
var imgs = new Array();
for (key in this.imgdata) {
if (this.imgdata[key] == this.emptyobj) {
imgs.push({text: '请上传头像', fontSize: 10, rowSpan: 3});
continue;
}//不存在的圖片直接忽略
imgs.push({image: this.imgdata[key], fit: [100, 150], rowSpan: 3});//在的圖片直接忽略
}
var content = {
content: [
{text: '学生档案', fontSize: 22, style: 'subheader', color: '#36B7AB', alignment: 'center'},
{text: '基本信息', fontSize: 15, style: 'subheader', color: '#36B7AB'},
{
style: 'tableExample',
table: {
widths: [100, 60, 55, '*', '*', '*', 100],
body: [
[{text: '学号：123456789123', fontSize: 8, margin: [0, 11, 0, 11]},
{text: '姓名：张三', fontSize: 8, margin: [0, 11, 0, 11]},
{text: '性别：男', fontSize: 8, margin: [0, 11, 0, 11]},
{text: '民族：回族', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
{text: '婚否：是', fontSize: 8, margin: [0, 11, 0, 11]},
imgs[0]],
[{text: '身份证号：654125321453625478', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
{text: '出生日期：1881-12-31', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
{text: '入学前文化程度：高中', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {}],
[{text: '邮箱：23412341234@qq.com', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
{text: '联系方式：123-4124-1243', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {},
{text: 'QQ：23412341234', fontSize: 8, colSpan: 2, margin: [0, 11, 0, 11]}, {}],
//省略内容
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10]
},
subheader: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 5]
},
tableExample: {
margin: [0, 5, 0, 15]
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
}
},
defaultStyle: {
font: '微软雅黑'
}
}
pdfmake(content);
}
}
</script>
<script>
function ImageDataURL(urls) {//urls必須是字符串或字符串數組
this.completenum = 0;
this.totalnum = 0;
this.imgdata = new Array();
this.emptyobj = new Object();
this.oncomplete = function(){};
this.getDataURL = function(url, index) {
var c = document.createElement("canvas");
var cxt = c.getContext("2d");
var img = new Image();
var dataurl;
var p;
p = this;
img.src = url;
img.onload = function() {
var i;
var maxwidth = 500;
var scale = 1.0;
if (img.width > maxwidth) {
scale = maxwidth / img.width;
c.width = maxwidth;
c.height = Math.floor(img.height * scale);
} else {
c.width= img.width;
c.height= img.height;
}
cxt.drawImage(img, 0, 0, c.width, c.height);
p.imgdata[index] = c.toDataURL('image/jpeg');
for (i = 0; i < p.totalnum; ++i) {
if (p.imgdata[i] == null)break;
}
if (i == p.totalnum) {
p.oncomplete();
}
};
img.onerror = function() {
p.imgdata[index] = p.emptyobj;
for (i = 0; i < p.totalnum; ++i) {
if (p.imgdata[i] == null)break;
}
if (i == p.totalnum) {
p.oncomplete();
}
};
}
if (urls instanceof Array) {
this.totalnum = urls.length;
this.imgdata = new Array(this.totalnum);
for (key in urls) {
this.getDataURL(urls[key], key);
}
} else {
this.imgdata = new Array(1);
this.totalnum = 1;
this.getDataURL(urls, 0);
}
}
</script>
</html>
导出结果
