js调起打印（某个div里的内容）
vue + elementUI
- vue
<template>
<div id="printBox">
打印的内容
<el-button class="noprint" @click="printing" type="primary">打印</el-button>
</div>
</template>
- js
printing () {
var body=document.getElementById("printBox"); // 获取打印部分的div
document.body.outerHTML=body.outerHTML // 打印div中的内容 outerHTML => 打印可以带上css样式
window.print(); // js调起打印
location.reload(); // 打印完成后，或取消打印，复原页面内容，直接刷新
}
- css（打印时的样式，隐藏掉打印按钮）
<style>
@media print {
.noprint{
display: none;
}
}
</style>
打印时打开一个新页面，打印后关闭
- html
<div id="printBox">
<!--你需要打印的内容-->
</div>
- js
var printBox = document.getElementById('printBox'); //获取需要打印的内容
var newWin = window.open(window.document.URL); //新打开一个标签页，这样不会影响现使用的页面
var newContent =printBox.innerHTML;
newWin.document.body.innerHTML = newContent; //将打印的部分赋值给新打开的标签页
newWin.print();//执行打印
newWin.close();//关闭打印窗口
https://blog.csdn.net/wwwwerewrew/article/details/100137746
A4纸打印
- 打印页面尺寸：794×1123
https://www.cnblogs.com/softwarefang/p/6093448.html - 打印设置
@media print { // 打印时执行
@page { // 设置打印样式
size: A4; // A4
size: portrait; // 纵向打印
margin: 0; // 边距设置，自定义
}
// 隐藏滚动条
::-webkit-scrollbar {display:none}
}
https://www.softwhy.com/article-5613-1.html
- 打印的背景颜色不展示
-webkit-print-color-adjust: exact; // 加给打印的div即可
https://www.cnblogs.com/sese/p/9057732.html
Safari 兼容
插件：https://www.cnblogs.com/coderwhytop/p/14462603.html
问题1：Safari打印一次后，不能再次打印
原因：document.body.removeChild(frame1) 删除元素太快
解决办法：加setTimeout，延时处理
前提：使用print.js打印
https://cloud.tencent.com/developer/ask/208425
问题2：Safari 按794px×1123px写的页面，打印A4纸，一小部分不展示
临时解决办法：判断Mac系统，给打印的部分做了缩放
使用流程：
1、main.js
import Print from '@/utils/print.js' // 打印
Vue.use(Print)
2、js 调用打印
let body = document.getElementById("print");
document.body.outerHTML = body.outerHTML
that.$print(that.$refs.print)
3、css（为了修复问题2，看情况使用，仅供参考）
- 动态加class
<div :class="isMac? 'is_mac': ''"></div>
- css只针对Mac缩放
.is_mac {
transform: scale(0.97); // 缩放比例
transform-origin: 0 bottom; // 缩放位置
}
- js判断系统是否是Mac
data() {
return {
isMac: false
}
},
created() {
this.isMac = /macintosh|mac os x/i.test(navigator.userAgent)
}
https://blog.csdn.net/jingtian678/article/details/86378694/
4、修改后的插件 utils/print.js
// 打印类属性、方法定义
/* eslint-disable */
const Print = function(dom, options) {
if (!(this instanceof Print)) return new Print(dom, options);
this.options = this.extend({
'noPrint': '.no-print'
}, options);
if ((typeof dom) === "string") {
this.dom = document.querySelector(dom);
} else {
this.isDOM(dom)
this.dom = this.isDOM(dom) ? dom : dom.$el;
}
this.init();
};
Print.prototype = {
init: function() {
var content = this.getStyle() + this.getHtml();
this.writeIframe(content);
},
extend: function(obj, obj2) {
for (var k in obj2) {
obj[k] = obj2[k];
}
return obj;
},
getStyle: function() {
var str = "",
styles = document.querySelectorAll('style,link');
for (var i = 0; i < styles.length; i++) {
str += styles[i].outerHTML;
}
str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
return str;
},
getHtml: function() {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
for (var k = 0; k < inputs.length; k++) {
if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
if (inputs[k].checked == true) {
inputs[k].setAttribute('checked', "checked")
} else {
inputs[k].removeAttribute('checked')
}
} else if (inputs[k].type == "text") {
inputs[k].setAttribute('value', inputs[k].value)
} else {
inputs[k].setAttribute('value', inputs[k].value)
}
}
for (var k2 = 0; k2 < textareas.length; k2++) {
if (textareas[k2].type == 'textarea') {
textareas[k2].innerHTML = textareas[k2].value
}
}
for (var k3 = 0; k3 < selects.length; k3++) {
if (selects[k3].type == 'select-one') {
var child = selects[k3].children;
for (var i in child) {
if (child[i].tagName == 'OPTION') {
if (child[i].selected == true) {
child[i].setAttribute('selected', "selected")
} else {
child[i].removeAttribute('selected')
}
}
}
}
}
let outerHTML = this.wrapperRefDom(this.dom).outerHTML
return outerHTML;
},
// 向父级元素循环，包裹当前需要打印的元素
// 防止根级别开头的 css 选择器不生效
wrapperRefDom: function(refDom) {
let prevDom = null
let currDom = refDom
// 判断当前元素是否在 body 中，不在文档中则直接返回该节点
if (!this.isInBody(currDom)) return currDom
while (currDom) {
if (prevDom) {
let element = currDom.cloneNode(false)
element.appendChild(prevDom)
prevDom = element
} else {
prevDom = currDom.cloneNode(true)
}
currDom = currDom.parentElement
}
return prevDom
},
writeIframe: function(content) {
var _this = this
if (/macintosh|mac os x/i.test(navigator.userAgent) || navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) { // Mac或企业微信
var frame = this.appendFrame(content);
_this.macPrint(frame)
} else {
var w, doc, iframe = document.createElement('iframe'),
f = document.body.appendChild(iframe);
iframe.id = "myIframe";
//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
w = f.contentWindow || f.contentDocument;
doc = f.contentDocument || f.contentWindow.document;
doc.open();
doc.write(content);
doc.close();
iframe.onload = function() {
_this.toPrint(w);
setTimeout(function() {
document.body.removeChild(iframe)
}, 100)
}
}
},
// mac 创建打印元素
appendFrame: function(content) {
var frame1 = document.createElement('iframe');
frame1.name = "frame3";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write(content);
frameDoc.document.close();
return frame1;
},
toPrint: function(frameWindow) {
try {
setTimeout(function() {
frameWindow.focus();
try {
if (!frameWindow.document.execCommand('print', false, null)) {
frameWindow.print();
location.reload(); // 刷新页面
}
} catch (e) {
frameWindow.print();
location.reload(); // 刷新页面
}
frameWindow.close();
location.reload(); // 刷新页面
}, 10);
} catch (err) {
console.log('err', err);
}
},
// Safari打印兼容
macPrint: function(frame) {
// Safari
if (!window.onafterprint) {
// emulate onbeforeprint/onafterprint events
var mediaQueryCallback = function(mql) {
if (!mql.matches && frame) {
setTimeout(function() { // 延时，解决打印自动关闭问题
document.body.removeChild(frame);
location.reload(); // 刷新页面
}, 200)
}
};
var mediaQueryList = window.frames[frame.name].matchMedia('print');
mediaQueryList.addListener(mediaQueryCallback);
// the code below will trigger a cleanup in case a user hits Cancel button
// in that Safari's new additional print confirmation dialog
window.frames[frame.name].focus();
window.frames[frame.name].onfocus = function() {
return mediaQueryCallback(mediaQueryList);
};
}
window.frames[frame.name].print();
return false;
},
// 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
isInBody: function(node) {
return (node === document.body) ? false : document.body.contains(node);
},
isDOM: (typeof HTMLElement === 'object') ?
function(obj) {
return obj instanceof HTMLElement;
} : function(obj) {
return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
}
};
const MyPlugin = {}
MyPlugin.install = function(Vue, options) {
// 4. 添加实例方法
Vue.prototype.$print = Print
}
export default MyPlugin
网友评论