JavaScript图片打印方案实例详解
最近有个页面打印图片的小需求。就是系统界面展示有一些证件照片，我们希望可以点击图片旁边的打印小按钮，就可以将这张图片直接打印到A4纸张上，例如下图效果：
其实浏览器 window 对象提供了 print 方法，就可以对整个页面进行打印。只需要点击按钮执行以下方法即可。
window.print()
调用此方法，会打印出整个 html 里的内容，即 document 对象下所有的页面节点。而我们需要的是只打印页面的某个元素部分，即只打印图片。
很遗憾，浏览器在 具体的dom 节点上并没有部署 print 方法，不过我们可以转变个思路，我们可以将需要打印的元素提取出来，同时构造一个新的window对象，将提取出来的元素插入到这个window对象下，再调用打印即可。
<button @click="print">打印</button> <div id="box"> <img src="/test.jpg"/> </div>
例如我们只需要打印id="box"下的 img
print(){
const el = document.querySelector("#box")
var newWindow=window.open("打印窗口","_blank");
var docStr = el.innerHTML;
newWindow.document.write(docStr);
newWindow.document.close();
newWindow.print();
newWindow.close();
},
通过 window.open 方式返回一个新的 window 对象，再调用 document.write 写入我们获取到指定节点，再打印即可。
这种方式有点不好的就是需要重新开一个 window ,并且设置一些打印的样式会比较麻烦。所以不推荐。
我查阅了一些知名的打印插件，都是采用的 iframe 来构造页面来实现局部打印的。iframe 有个属性 srcdoc可以渲染指定的html内容
<iframe srcdoc="<p>Hello world!</p>"></iframe>
以往我们都是通过src来加载一个指定的页面地址，这里通过 srcdoc 来渲染指定的html内容。下面实现一个最简单的点击按钮打印图片功能：
// 打印
function btnClick(){
const iframe = document.createElement('iframe')
// 视觉上隐藏 iframe
iframe.style.height = 0
iframe.style.visibility = 'hidden'
iframe.style.width = 0
const str =
`<html>
<style media='print'>
@page{size:A4 landscape};margin:0mm;padding:0}
</style>
<body>
<div id="box"></div>
</body>
</html>
`
iframe.setAttribute('srcdoc', str);
document.body.appendChild(iframe);
// 一定要加载完成后执行
iframe.addEventListener("load",()=>{
const image = document.querySelector('img').cloneNode();
image.style.display = 'block'
const box = iframe.contentDocument.querySelector('#box');
box.appendChild(image);
// 一定要图片加载完再打印
image.addEventListener('load', function () {
// 打印
iframe.contentWindow.print();
});
})
iframe.contentWindow.addEventListener('afterprint', function () {
iframe.parentNode.removeChild(iframe);
});
}
对于打印的样式设置，可以通过在style标签上添加media=print来设置
<style media='print'>
@page{size:A4 landscape};margin:0mm;padding:0}
</style>
上述就指定了打印机默认格式为A4纸张 横向打印 ，margin设置成0毫米是为了保证不出现页眉页脚。
基础功能的打印实现了，可是为了让打印体验更好，产品经理又提出了需求点：
- 当图片是横图时，即宽度大于高度的图片时，需要将A4纸张横向打印，然后图片在A4里面上下左右都居中。同时要将这张图片尽可能地铺满A4纸张，也不能改变图片的宽高比（即不变形）。
- 当图片是纵图时，即宽度小于高度的图片时，需要将A4纸张纵向打印，然后图片在A4里面上下左右都居中。同时要将这张图片尽可能地铺满A4纸张，也不能改变图片的宽高比（即不变形）。
- 图片不要紧挨着纸张边缘，留出一定边距。
横图效果：
纵图效果：
实现思路： 由于要保证纸张边缘留有一定的空白区域，这个时也可以使用 margin 来实现。
<style media='print'>
@page{size:A4 landscape;margin:10mm;}
</style>
但是不将 margin 设置成 0 的话，又会默认出现页眉页脚。这显然是矛盾的。这个时候我想到了一个好的思路，就是将图片放置到一个 div 容器里，这个 div 宽高设置成 A4 一样的大小。同时将div里面的图片通过 flex 布局来实现上下左右都居中。然后打印区域设置成这个容器就可以了。
由于 div 和 A4 纸张一样大，所以 @page 里可以设置成 margin:0mm 来规避页眉页脚的出现。然后里面的图片需要居中
// 获取图片宽高比
const rate = owidth/oheight
// 横图的话容器宽度就是A4的高度，即29.7cm，纵图的话宽度就是21cm,由于刚好设置成21cm会溢出，多出一张纸，原因未明，所以我设置成20.9
const boxWidthCM = `${rate >1 ? 29.7 : 20.9}cm`
// 容器高度
const boxHeightCM = `${rate >1 ? 20.9 : 29.7}cm`
const str =
`<html>
<style media='print'>
@page{size:A4 ${rate>1 ? 'landscape':'portrait'};margin:0mm;padding:0}
</style>
<style>
*{padding:0;margin:0}
body{height:100%}
#box{
width:${boxWidthCM};
height:${boxHeightCM};
display:flex;
align-items:center;
justify-content:center;
}
</style>
<body>
<div id="box"></div>
</body>
</html>`
iframe.setAttribute('srcdoc', str);
居中问题解决了，接下来就是解决图片尽可能铺满纸张问题。这个时候我们需要结合容器大小以及图片宽高比来手动计算图片宽高，算法如下：
let imgW = null;
let imgH = null;
if(rate > 1){ // 横图
if(rate>1.414){
imgW = 29.7
imgH = 29.7/rate
} else {
imgH = 20.9
imgW = 20.9*rate
}
} else {
if(rate>(1/1.414)){
imgW = 20.9
imgH = 20.9/rate
} else {
imgH = 29.7
imgW = 29.7*rate
}
}
// 预留1cm边距
imgW = imgW - 1
imgH = imgW/rate
iframe.addEventListener("load",()=>{
const image = document.createElement("img")
image.style.width = item.width
image.style.height = item.height
image.style.display = 'block'
image.src = item.newUrl || item.url || item.original_content_url
image.style.width = `${imgW}cm`
image.style.height = `${imgH}cm`
const box = iframe.contentDocument.querySelector('#box');
box.appendChild(image);
image.addEventListener('load', function () {
iframe.contentWindow.print();
});
})
完整代码：
print(item){
const { owidth,oheight,height } = item
const rate = owidth/oheight
const imgHeight = height.replace("px","")
const iframe = document.createElement('iframe')
iframe.style.height = 0
iframe.style.visibility = 'hidden'
iframe.style.width = 0
const boxWidthCM = `${rate >1 ? 29.7 : 20.9}cm`
const boxHeightCM = `${rate >1 ? 20.9 : 29.7}cm`
let imgW = null;
let imgH = null;
if(rate > 1){ // 横图
if(rate>1.414){
imgW = 29.7
imgH = 29.7/rate
} else {
imgH = 20.9
imgW = 20.9*rate
}
} else {
if(rate>(1/1.414)){
imgW = 20.9
imgH = 20.9/rate
} else {
imgH = 29.7
imgW = 29.7*rate
}
}
// 预留1cm边距
imgW = imgW - 1
imgH = imgW/rate
const str =
`<html>
<style media='print'>
@page{size:A4 ${rate>1 ? 'landscape':'portrait'};margin:0mm;padding:0}
</style>
<style>
*{padding:0;margin:0}
body{height:100%}
#box{
width:${boxWidthCM};
height:${boxHeightCM};
display:flex;
align-items:center;
justify-content:center;
}
</style>
<body>
<div id="box"></div>
</body>
</html>`
iframe.setAttribute('srcdoc', str);
document.body.appendChild(iframe);
iframe.addEventListener("load",()=>{
const image = document.createElement("img")
image.style.width = item.width
image.style.height = item.height
image.style.display = 'block'
image.src = item.newUrl || item.url || item.original_content_url
image.style.width = `${imgW}cm`
image.style.height = `${imgH}cm`
const box = iframe.contentDocument.querySelector('#box');
box.appendChild(image);
image.addEventListener('load', function () {
iframe.contentWindow.print();
});
})
iframe.contentWindow.addEventListener('afterprint', function () {
iframe.parentNode.removeChild(iframe);
});
}
总结
到此这篇关于JavaScript图片打印方案的文章就介绍到这了,更多相关JavaScript 图片打印内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS实现页面打印功能
打印整个页面 示例1. 可直接在按钮添加调用打印方法: <input type='button' value='打印整页' onclick='javascript:window.print();' /> 示例2. 也可调用JS方法 <html> <head> <script type="text/javascript"> function printpage() { window.print() } </script> <
-
Vue中使用Printjs插件实现打印功能
目录 前言 一.Print.js介绍 二.安装/引入 方法1.下载print.js 方法2.使用npm安装print插件 三.使用-“html”类型 四.其他Type示例 总结 前言 客户需求: 表单支持在线打印实现思路: 百度…百度…百度之后,printjs 这款插件比较满足需求,无需下载,无需写打印模板,并且兼容Element-ui中el-form表单的打印. 一.Print.js介绍 Print.js官网 Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离
-
vue使用Print.js打印页面样式不出现的解决
目录 vue Print.js打印页面样式不出现 解决方案 vue-print-nb打印问题总结 1.表格的列缺失(element-ui table组件) 2.打印内容缺失(print.js/print-js独有,固定高度导致) 4.不能分页 vue Print.js打印页面样式不出现 解决方案 加上这句就好了!完美! vue-print-nb打印问题总结 1.表格的列缺失(element-ui table组件) 原因:table-layout: fixed导致的,出现部分列没有被打印 让表ta
-
vue 使用print-js 打印渲染不出来问题
目录 使用print-js 打印渲染不出来 vue中printjs使用指南 使用攻略 参数 使用print-js 打印渲染不出来 vue 使用print-js 打印渲染不出来, 实际数据已经加载出来了. 遇到这问题,解决方向 1.是否是数据未赋值上 2.打印加载js是否渲染上 所以:在vue中可以使用id的形式和ref的形式进行绑定,如果id绑定渲染不成功的话可以尝试 <div id="printDiv" ref="printDiv"/> this.
-
js实现简单的打印表格
本文实例为大家分享了js实现打印表格的具体代码,供大家参考,具体内容如下 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打印表格</title> </head> <body> <script> var data=[ {id:1001,icon:
-
javascript 中的继承实例详解
javascript 中的继承实例详解 阅读目录 原型链继承 借用构造函数 组合继承 寄生组合式继承 后记 继承有两种方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且实现继承主要依靠原型链来实现. 下面介绍几种js的继承: 原型链继承 原型链继承实现的本质是重写原型对象,代之以一个新类型的实例.代码如下: function SuperType() { this.pr
-
Android图片压缩的实例详解
Android图片压缩的实例详解 在做微信分享的时候,由于分享的缩略图要求不得大于32K,否则不能调起微信,所以总结了一下Android图片的压缩问题,大部分资料都是来自网上各位的分享,自己只是完善或修改了一下,本着继续分享的精神,也方便自己记忆,于是总结如下. android图片压缩主要有两种方式:1.压缩图片分辨率 2.压缩图片质量 一.先看压缩图片分辨率,很好理解,如本来1280*768的图片压缩为640*384大小.废话不说,直接上代码: /** * 按比例压缩图片分辨率 * @para
-
jquery.picsign图片标注组件实例详解
经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多 因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle
-
php多个文件及图片上传实例详解
本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下
-
JavaScript队列的应用实例详解【经典数据结构】
本文实例讲述了JavaScript队列的应用.分享给大家供大家参考,具体如下: 和前面介绍的栈相反,队列是一种先进先出的线性表,它只允许在表的一端进行插入,而在另一端进行删除.JavaScript自己提供了两个队列方法shift和push方法,分别是出队和入队,其原理就是将元素插入数组最后一个和删除第一个元素. 这里需要注意一点,就是unshift方法的效率比push的效率要低很多.因为它要将入队之前的数组全部往前移动一位.这里我们就不用代码再次演示了. 和线性表类似,队列也分为顺序队列和链队列
-
javascript常用经典算法实例详解
本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld //线性搜索(入门HelloWorld) //A为数组,x为要搜索的值 function linearSearch(A, x) { for (var i = 0; i < A.length; i++) { if (A[i] == x) { return i; } } return -1; } 二分查找(又称折半查找) - 适用于已排好序的
-
基于javascript的异步编程实例详解
本文实例讲述了基于javascript的异步编程.分享给大家供大家参考,具体如下: 异步函数这个术语有点名不副实,调用一个函数后,程序只在该函数返回后才能继续.JavaScript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列.如果后面这个函数是作为参数传递给前者的,则称其为回调函数. callback 回调函数是异步编程最基本的方式. 采用这种方式,我们把同步操作变成了异步操作,主函数不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟
-
JavaScript中Dom操作实例详解
本文实例讲述了JavaScript中Dom操作.分享给大家供大家参考,具体如下: 博主将按照增删改查的方式来介绍一下Dom的主要操作. 1.增加节点 添加节点的操作主要分为3步: (1)创建要添加的新节点 (2)找到要添加到的父节点 (3)父节点添加新节点 参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com
-
javascript防篡改对象实例详解
本文实例讲述了javascript防篡改对象.分享给大家供大家参考,具体如下: JavaScript中对象内置有多个属性Configurable,Writable,Enumerable,Value,Get和Set,来控制属性的行为.同样的ES5也有几个方法,来指定对象的行为.我们知道,javascript中的对象是可以共享的,也是默认可拓展的: //一旦将对象设置防篡改,就不能撤销了 //众所周知,一般的对象是可以随意拓展的 var person = {name:'liufang'}; pers
-
javascript原型模式用法实例详解
本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了 原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客