一个精悍的Javascript库,实现Web打印(print.js)

载地址在github,文末有使用方法

github地址:https://github.com/crabbly/Print.js/

官网:https://printjs.crabbly.com/(可能被墙)

无法访问可以加企鹅群看离线版:1006429377

或者访问:https://www.yuque.com/caiyongjie/snknlo/ga5ef9

官网截图

简介

原文:

Print.js was primarily written to help us print PDF files directly within our apps, without leaving the interface, and no use of embeds. For unique situations where there is no need for users to open or download the PDF files, and instead, they just need to print them.

One scenario where this is useful, for example, is when users request to print reports that are generated on the server side. These reports are sent back as PDF files. There is no need to open these files before printing them. Print.js offers a quick way to print these files within our apps.

谷歌翻译:

Print.js主要是为了帮助我们直接在我们的应用程序中打印PDF文件，而无需离开界面，也不使用嵌入。对于不需要用户打开或下载PDF文件的独特情况，相反，他们只需要打印它们。

例如，当用户请求打印在服务器端生成的报告时，这种情况很有用。这些报告以PDF文件形式发回。打印前无需打开这些文件。 Print.js提供了一种在我们的应用程序中打印这些文件的快捷方式。

注意的地方:

PDF files must be served from the same domain as your app is hosted under. Print.js uses iframe to load files before printing them, therefore, it is limited by the Same Origin Policy. This helps preventing Cross-site scripting (XSS) attacks.

必须在托管应用程序的同一域中提供PDF文件。 Print.js在打印文件之前使用iframe加载文件，因此它受同源策略的限制。这有助于防止跨站点脚本（XSS）攻击。

初体验

首先在页面上添加一个按钮

打印PDF(注意:火狐不支持iframes,可以使用新标签页)

<button type="button" onclick="printJS('docs/printjs.pdf')">
 Print PDF
 </button>

打印大文件(可以弹出提示消息)

<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
 Print PDF with Message
 </button>

html打印

 <form method="post" action="#" id="printJS-form">
 ...
 </form>
 <button type="button" onclick="printJS('printJS-form', 'html')">
 Print Form
 </button>

打印带头部

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
 Print Form with Header
 </button>

打印图片

<img src="images/print-01.jpg" />
 printJS('images/print-01-highres.jpg', 'image')
 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

带头

 printJS({
 printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
 type: 'image',
 header: 'Multiple Images',
 imageStyle: 'width:50%;margin-bottom:20px;'
 })

从JSON数据

 someJSONdata = [
 {
 name: 'John Doe',
 email: 'john@doe.com',
 phone: '111-111-1111'
 },
 {
 name: 'Barry Allen',
 email: 'barry@flash.com',
 phone: '222-222-2222'
 },
 {
 name: 'Cool Dude',
 email: 'cool@dude.com',
 phone: '333-333-3333'
 }
 ]
 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
 Print JSON Data
 </button>

自定义CSS

 <button type="button" onclick="printJS({
	 printable: someJSONdata,
	 properties: ['name', 'email', 'phone'],
	 type: 'json',
	 gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',
	 gridStyle: 'border: 2px solid #3971A5;'
	})">
 Print JSON Data
 </button>

自定义头

 <button type="button" onclick="printJS({
	 printable: someJSONdata,
	 properties: [
		{ field: 'name', displayName: 'Full Name'},
		{ field: 'email', displayName: 'E-mail'},
		{ field: 'phone', displayName: 'Phone'}
	 ],
	 type: 'json'
 })">
 Print with custom table header text
 </button>
<button type="button" onclick="printJS({
		printable: someJSONdata,
		type: 'json',
		properties: ['name', 'email', 'phone'],
		header: '<h3 class="custom-h3">My custom header</h3>',
		style: '.custom-h3 { color: red; }'
	 })">
	Print header raw html
</button>

安装使用

 npm install print-js --save
//或
 yarn add print-js

import print from 'print-js'

 //cdn,不知道能不能访问,我这可以访问
 https://printjs-4de6.kxcdn.com/print.min.js
 https://printjs-4de6.kxcdn.com/print.min.cssye
 <script src="print.js"></script>

如果您将使用模态功能，还包括页面上的Print.css。

 <link rel="stylesheet" type="text/css" href="print.css">

详细配置:

兼容性

.首先引入js插件

</script><script src="/Liems/plugins/aweto/jquery.PrintArea.js"></script>

2.然后再html中添加二维码显示的位置

<button id="bu" class='i-form-button' onclick="stamp()" style="display: none;">打印二维码</button>

</div>

3.然后在js中写入生成二维码的方法

jQuery(function(){

//获取身份证号码

var idCard = $('#EOEMPMST__0__EEM_SFZ_COD').val();

var jsons=idCard+"|1";

var zhi=utf16to8(jsons);

//判断是否新建

if(idCard != null && idCard != ''){

jQuery('#qrcode').qrcode({

render : "canvas",

width : 150,

height : 150,

text : zhi

});

//保存为图片

$("canvas").attr("id","erw");

var canvas = document.getElementById('erw');

var context = canvas.getContext('2d');

var image = new Image();

var strDataURI =canvas.toDataURL("image/png");

document.getElementById('image').src = strDataURI;

document.getElementById('bu').setAttribute('style', 'display: block');

}

})

4.qrcode对中文支持不太好，，所以需要转码

//转码

function utf16to8(str) {

var out, i, len, c;

out = "";

len = str.length;

for(i = 0; i < len; i++) {

c = str.charCodeAt(i);

if ((c >= 0x0001) && (c <= 0x007F)) {

out += str.charAt(i);

} else if (c > 0x07FF) {

out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));

out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));

out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

} else {

out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));

out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));

}

return out;

}

5.最后进行局部打印

//局部打印

function stamp(){

var bdhtml=window.document.body.innerHTML;//获取当前页的html代码

var odd=bdhtml;

var sprnstr="";//设置打印开始区域

var eprnstr="";//设置打印结束区域

var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17); //从开始代码向后取html

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html

window.document.body.innerHTML=prnhtml;

window.print();

//第二种打印jQuery('#wai').PrintArea();

//还原原网页

window.document.body.innerHTML=odd;

document.getElementById('bu').setAttribute('style', 'display: none');

document.getElementById('image').src="";

window.location.reload();

}

方法中有业务处理，，忽略即可。大体思路如上，欢迎讨论

、测试代码，保存为【test.html】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="write.js"></script>
</head>

<body>
    <div id="ID1"></div>

    <script>
        writeformat(()=>{
            writeln(1, 2, 3, 4);
            writeln(1, [2, 3], 4);
            writeln({a:1,b:2});
            writeln(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2} ]);
            writeln();
        });

        writebr(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2} ]);

        document.getElementById("ID1").innerHTML = getWriteHtml(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2} ]);

        writeformat(()=>{
            write(getWriteHtmlPretty(1, [2, 3], [4, { a:1, b: { c:1, d:2 }},{a:1,b:2},5 ],6));
        });
    </script>
</body>

</html>

效果如下：

2、源码（保存为 write.js）

在线咨询

上一篇：如何从网络上下载一张图片并保存到本地？
下一篇：源码分享 HTML 爱心

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商