JS导出PDF插件的⽅法（⽀持中⽂、图⽚使⽤路径）
针对这些问题，本⽂的主要内容可分为三部分：
•pdfmake的基本使⽤⽅法；
•如何解决中⽂问题;
•如何通过指定图⽚地址插⼊图⽚。
pdfmake的基本使⽤⽅法
1.包含以下两个⽂件
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
2.在JS代码中声明⼀个Document-definition对象，这个是pdfmake⾃⼰的术语。简单点说，就是创建⼀个⾄少包含content属性的对象。然后就可以调⽤pdfMake的⽅法导出PDF，具体见如下代码：
<script type="text/javascript">
//创建Document-definition对象
var dd = {
content: [
'One paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
};
//导出PDF
</script>
按照上例操作，就可以看到提⽰⽂件下载了。关于pdfmake的完整教程请登陆pdfmake项⽬查看。
pdfmake⽀持中⽂
三个步骤：
1.到pdfmake项⽬⽹站，把⼯程都下载下来，然后进⼊⼯程⽬录将字体⽂件（⽐如微软雅⿊.ttf)放到examples/fonts⽬录下，然后使⽤grunt dump_dir⽣成新的vfs_fonts.js⽂件；
从上⾯描述可知该⼯程是通过grunt管理的，如果⽆相关知识，请上⽹先补习下。
grunt dump_dir命令会将fonts⽬录下所有⽂件都打包，因此⽆⽤⽂件请别放进去。
微软雅⿊.ttf⽹上⼀搜⼀⼤把，WINDOWS电脑系统盘下存放字体的⽬录也得到。
2.回到⾃⼰的例⼦代码中，JS代码中修改pdfMake的fonts对象，声明当前要⽤到字体：
pdfMake.fonts = {
Roboto: {
normal: 'f',
bold: 'f',
italics: 'f',
bolditalics: 'f'
},
微软雅⿊: {
normal: '微软雅⿊.ttf',
bold: '微软雅⿊.ttf',
italics: '微软雅⿊.ttf',
bolditalics: '微软雅⿊.ttf',
}
};
3.Document-definition对象中声明默认要使⽤的字体，具体来说：就是声明⼀个对象，除了content属性，还要有⼀个defaultStyle属性，该defaultStyle下⾯还有再有⼀个font属性：
var dd = {
content: [
'中英⽂测试',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
defaultStyle: {
font: '微软雅⿊'
}
};
以下为根据如上步骤做的⼀个完整例⼦源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>my first export PDF</title>
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
<script>
function down() {
var dd = {
content: [
'中英⽂测试',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
defaultStyle: {
font: '微软雅⿊'
}
};
pdfMake.fonts = {
Roboto: {
normal: 'f',
bold: 'f',
italics: 'f',
bolditalics: 'f'
},
微软雅⿊: {
normal: '微软雅⿊.ttf',
bold: '微软雅⿊.ttf',
italics: '微软雅⿊.ttf',
bolditalics: '微软雅⿊.ttf',
}
};
}
</script>
</head>
<body>
<button onclick="down()">下载</button>
</body>
</html>
插⼊图⽚
在插⼊图⽚⽅⾯，jsPDF要求先将图⽚转换成Data URL才⾏，⽽pdfmake允许直接指定路径，看起来是很⽅便，但这是有条件的，必须是以node.js作为服务器，或者将图⽚放到vfs_fonts.js中，所以总的来说，⽤处不⼤，还是⼀样得将图⽚转换成Data URL形式才⾏。
为解决此问题，我写了⼀个ImageDataURL的函数对象，可同时传⼊多个图⽚地址。在图⽚都加载完成
后，plete将被触发，在回调中通过this.imgdata取出各个图⽚的Data URL，根据
pdfmake的要求组织下，就可正确⽣成pdf了。
ImageDataURL的原理是通过H5的canvas标签，将图⽚绘制在canvas上，然后通过canvas的toDataURL得到图像的Data URL。使⽤时请注意浏览器兼容性问题。
以下为将sampleImage.jpg, sampleage.jpg, sampleImage.jpg依次写⼊PDF的例⼦，测试时sampleage.jpg不存在，PDF直接忽略。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>my second export PDF</title>
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
<script>
function down() {
var x = new ImageDataURL(["sampleImage.jpg", "samplage.jpg", "sampleImage.jpg"]);
var imgs = new Array();
console.log("complete");
for (key in this.imgdata) {
if (this.imgdata[key] == ptyobj)//不存在的图⽚直接忽略
continue;
imgs.push({image:this.imgdata[key]});//pdfmake的图⽚格式{image:image dataurl} }
var dd = {
content: [
'Title',
imgs,
],
};
}
}
</script>
</head>
<body>
<button onclick="down()">下载</button>
<script>
function ImageDataURL(urls) {//urls必须是字符串或字符串数组
thispletenum = 0;
this.imgdata = new Array();
var c = ateElement("canvas");
var cxt = c.getContext("2d");
var img = new Image();
var dataurl;
var p;
p = this;
img.src = url;
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.imgdata[index] = p.emptyobj;
for (i = 0; i < p.totalnum; ++i) {
if (p.imgdata[i] == null)
break;
}
nodejs字符串转数组
if (i == p.totalnum) {
}
};
}
if (urls instanceof Array) {
this.imgdata = new alnum);
for (key in urls) {
}
} else {
this.imgdata = new Array(1);
}
}
</script>
</body>
</html>
以上这篇JS导出PDF插件的⽅法(⽀持中⽂、图⽚使⽤路径)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论