当前位置: 首页 > 工具软件 > pdfmake > 使用案例 >

前端生成pdf的js库-pdfmake.js的简单使用

栾英资
2023-12-01

  公司之前是通过 Jaspersoft Studio软件,生成一个.jasper文件模板,通过模板中的sql语句,查询信息,生成pdf传给前端显示或者下载。

  但是觉得会占用带宽,浪费服务器资源,并且这件事前端js也可以实现,在网上找到了国外某神人开发的pdfmake.js这个库,觉得很棒,英文比较棒的同学可以前往官网自学:

  pdfmake.js官网: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">查看pdf</button>
    <!-- pdf显示位置-->
    <div id="modal_data_body_pdf">
        <iframe id="iframe_pdf"></iframe>
    </div>
</body>

</html>

 

 类似资料: