前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用

最新推荐文章于 2024-07-01 15:36:09 发布

swirlee

最新推荐文章于 2024-07-01 15:36:09 发布

阅读量2.2k

点赞数 1

分类专栏：前端 javascript 文章标签：ｐｄｆｍａｋｅ．ｊｓ前端生成ｐｄｆ

本文链接：https://blog.csdn.net/swirlee/article/details/97889798

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

　　公司之前是通过 Jaspersoft Studio软件，生成一个．ｊａｓｐｅｒ文件模板，通过模板中的ｓｑｌ语句，查询信息，生成ｐｄｆ传给前端显示或者下载。

　　但是觉得会占用带宽，浪费服务器资源，并且这件事前端ｊｓ也可以实现，在网上找到了国外某神人开发的ｐｄｆｍａｋｅ．ｊｓ这个库，觉得很棒，英文比较棒的同学可以前往官网自学：

　　ｐｄｆｍａｋｅ．ｊｓ官网：http://pdfmake.org/

　　这里只是做了个日常使用的例子：

<!DOCTYPE html>
<html>
<head>
<title></title>
<%--前端生成pdf的插件--%>
<script type="text/javascript" src="${localCtx}/resources/jquery/pdfmake.js"></script>
<%--配合pdfmake.js的字体库（只含有仿宋和黑体），如何更改vfs_fonts.js，参照官网--%>
<script type="text/javascript" src="${localCtx}/resources/jquery/vfs_fonts.js"></script>
</head>

<script type="text/javascript">
//打印的动态信息
var pdf_data = {
	xfjName: '李二麻不服火车站扣脚被罚200元',
	time:'2017年12月25日15时30分',
	address:'英国伦敦唐宁街10号',
	dcr:'斯密斯',
	dcr_dw:'山东路123号6单元2门洞602室',
	jlr:'汤姆',
	jlr_dw:'中南海1号',
	bdcr:'唐纳德·川普',
	content:'问：说的是大家按时打卡打卡.\n答：时代精神的房东房客第三方接口货到付款'
}
var dd = {
	pageSize:'A4',//纸张大小
	pageOrientation:'portrait',//排版,默认:'portrait'(竖版),'landscape'(横板)
	compress: true,//pdf压缩，默认:true
	pageMargins: [ 40, 60, 40, 60 ],//页边距(左、上、右、下)
	//pdf中内容的显示
	content: [
		{ text: pdf_data.xfjName + '信访事项复查（复核）调查（约谈）笔录', style: 'header' },
		{ text: '时间：' + pdf_data.time, style: 'content' },
		{ text: '调查地点：' + pdf_data.address, style: 'content' },
		{ text: '调查人：' + pdf_data.dcr + '&#12288;&#12288;工作单位：' + pdf_data.dcr_dw, style: 'content' },
		{ text: '记录人：' + pdf_data.jlr + '&#12288;&#12288;工作单位：' + pdf_data.jlr_dw, style: 'content' },
		{ text: '被调查人：' + pdf_data.bdcr, style: 'content' },
		{ text: pdf_data.content, style: 'content' }
	],
	//文字样式
	styles: {
		header: {
			fontSize: 20,//字体大小
			bold: true,//粗体(如果导入的字体库中没有相应文字的粗体，请不要加)
			alignment:'center'//居中对齐
		},
		content: {
			fontSize: 14,
			italics: true,//字体的一种(如果导入的字体库中没有相应的字体，请不要加)
			//alignment: 'right'//居右对齐
		}
	},
	defaultStyle: {
		font: 'fangsong'
	}
};
pdfMake.fonts = {
	fangsong: {
		normal: 'fangsong.ttf',
		bold: 'fangsong.ttf',
		italics: 'fangsong.ttf',
		bolditalics: 'fangsong.ttf'
	}
};
$(function(){	
	$("#btn_printtt").click(function(){
		//pdfMake.createPdf(dd).download("名字没想好哦");//下载
		//pdfMake.createPdf(dd).open();//打开 参数：window(本页打开)
		// pdfMake.createPdf(dd).getBase64().then(function(data) {//将pdf转成base64
		//  	alert(data);
		// });
        pdfMake.createPdf(dd).getDataUrl().then(function(pdf_url){
        	$("#modal_data_pdf").modal({backdrop:'static'});//打开模态框
            var targetElement = document.querySelector('#modal_data_body_pdf');
            var iframe = document.querySelector('#iframe_pdf');
            iframe.src = pdf_url;//给iframe设置src
            $(iframe).css({height:'500px', width:'100%'});
        });
	});
});
</script>

<body>
    <!-- 查看pdf按钮-->
    <button type="button" id="btn_printtt">查看ｐｄｆ</button>
    <!-- ｐｄｆ显示位置-->
    <div id="modal_data_body_pdf">
        <iframe id="iframe_pdf"></iframe>
    </div>
</body>

</html>

swirlee

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用

　　公司之前是通过Jaspersoft Studio软件，生成一个．ｊａｓｐｅｒ文件模板，通过模板中的ｓｑｌ语句，查询信息，生成ｐｄｆ传给前端显示或者下载。　　但是觉得会占用带宽，浪费服务器资源，并且这件事前端ｊｓ也可以实现，在网上找到了国外某神人开发的ｐｄｆｍａｋｅ．ｊｓ这个库，觉得很棒，英文比较棒的同学可以前往官网自学：　　ｐｄｆｍａｋｅ．ｊｓ官网：http://pdfmake.or...
复制链接

扫一扫

专栏目录