PrintJs簡(jiǎn)單使用
PrintJs官網(wǎng)地址：https://printjs.crabbly.com/
1、可以從GitHub版本下載最新版本的Print.js：https://github.com/crabbly/Print.js/releases
2、npm 安裝
npm install print-js --save
更多參考：https://blog.csdn.net/sunxiaoju/article/details/126284860
echarts無(wú)法打印解決
修改print.js的getHtml，增加對(duì)canvas的處理，將echarts轉(zhuǎn)為圖片：
getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
var canvass = document.querySelectorAll('canvas');
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')
}
}
}
}
}
//canvass echars圖表轉(zhuǎn)為圖片
for (var k4 = 0; k4 < canvass.length; k4++) {
var imageURL = canvass[k4].toDataURL("image/png");
var img = document.createElement("img");
img.src = imageURL;
img.setAttribute('style', 'max-width: 100%;');
img.className = 'isNeedRemove'
canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
}
},
el-table打印不全
方法一：修改print.js的getHtml方法，增加對(duì)表格的寬度處理
getHtml: function () {
var inputs = document.querySelectorAll('input');
var textareas = document.querySelectorAll('textarea');
var selects = document.querySelectorAll('select');
let cells = document.querySelectorAll('.cell');
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')
}
}
}
}
}
const tableNode = document.querySelectorAll('.el-table__header,.el-table__body');
//el-table 打印不全的問(wèn)題
for(let k6 = 0 ; k6 < tableNode.length ; k6++){
const tableItem = tableNode[k6] ;
tableItem.style.width = '100%';
const child = tableItem.childNodes;
for (let i = 0; i < child.length; i++) {
const element = child[i];
if(element.localName === 'colgroup'){
element.innerHTML = '';
}
}
}
//el-table 格子里面打印超過(guò)格子的問(wèn)題
for(let k7 = 0 ; k7 < cells.length ; k7 ++){
const cell = cells[k7] ;
cell.style.width = '100%';
cell.removeAttribute('style')
}
return this.dom.outerHTML;
},
方法二：將el-table改為table
具體實(shí)現(xiàn)參考：https://blog.csdn.net/admin11196/article/details/116168923
方法三：結(jié)合html2Canvas將打印的頁(yè)面轉(zhuǎn)為圖片
這條同樣可以解決echarts不能打印問(wèn)題，算是萬(wàn)能之法了吧，相對(duì)前面幾種方式趕緊這個(gè)方法最簡(jiǎn)單，打印效果也比較理想。
1、首先需要安裝html2canvas 和print-js 插件并引入，配置請(qǐng)參考文檔：https://github.com/niklasvh/html2canvas
2、寫(xiě)一個(gè)打印公共方法：
//html轉(zhuǎn)圖片打?。ń鉀Qelement table打印不全的問(wèn)題）
import html2canvas from "html2canvas";
import printJS from "print-js";
/**
* html轉(zhuǎn)圖片
* @param printContent
* @param callback
*/
export const html2Canvas = (printContent, callback) => {
// 獲取dom 寬度 高度
const width = printContent.clientWidth;
const height = printContent.clientHeight;
// 創(chuàng)建一個(gè)canvas節(jié)點(diǎn)
const canvas = document.createElement("canvas");
const scale = 4; // 定義任意放大倍數(shù)，支持小數(shù)；越大，圖片清晰度越高，生成圖片越慢。
canvas.width = width * scale; // 定義canvas 寬度 * 縮放
canvas.height = height * scale; // 定義canvas高度 *縮放
canvas.style.width = width * scale + "px";
canvas.style.height = height * scale + "px";
canvas.getContext("2d").scale(scale, scale); // 獲取context,設(shè)置scale
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; // 獲取滾動(dòng)軸滾動(dòng)的長(zhǎng)度
const scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft; // 獲取水平滾動(dòng)軸的長(zhǎng)度
html2canvas(printContent, {
canvas,
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
scrollX: -scrollLeft, // 解決水平偏移問(wèn)題，防止打印的內(nèi)容不全
scrollY: -scrollTop
//background: "#ffffff", // 一定要添加背景顏色，否則出來(lái)的圖片，背景全部都是透明的
})
.then(canvas => {
const url = canvas.toDataURL("image/png");
//console.log("canvas url :" + url);
callback({ url: url });
})
.catch(err => {
console.error(err);
});
};
/**
* 用printJs打印圖片
* @param url
* @param callback
*/
export const printImg = (url, callback) => {
printJS({
printable: url,
type: "image",
documentTitle: "", // 標(biāo)題
style: "@page{size:auto;margin: 1cm ;}", // 去除頁(yè)眉頁(yè)腳
onStart: () => {
console.log("打印開(kāi)始");
},
onEnd: () => {
console.log("打印完成");
}
});
};
/**
* html轉(zhuǎn)圖片打印
* @param dom
* @param callback
*/
export const html2CanvasPrint = (dom, callback) => {
//1、html轉(zhuǎn)圖片
html2Canvas(dom, canvasRes => {
//2、打印圖片
printImg(canvasRes.url, callback);
});
};
3、調(diào)用方法：
html2Canvas(this.$refs.printDom, res => {
this.printDomUrl = res.url;
printImg(res.url, printRes => {});
});
更多內(nèi)容參考：https://blog.csdn.net/weixin_40466351/article/details/115908035
注意：遇到大坑啊，html轉(zhuǎn)圖片的方式在windows上面打印預(yù)覽沒(méi)有任何問(wèn)題，但是在Mac上面所有的字體間距均被放大，頁(yè)面簡(jiǎn)直錯(cuò)的離譜啊，無(wú)奈又換回方法二，通過(guò)調(diào)整dom打印縮放解決了。
具體方法如下：
-
修改print.js的getHtml方法，參考方法一的內(nèi)容；
-
在開(kāi)始打印前縮小dom的尺寸；打印結(jié)束后恢復(fù)dom的原尺寸；
print.js監(jiān)聽(tīng)打印預(yù)覽的關(guān)鍵代碼：
const Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options);
this.options = this.extend({
'noPrint': '.no-print',
onStart: function () {},//打印開(kāi)始監(jiān)聽(tīng)回調(diào)
onEnd: function () {}//打印結(jié)束監(jiān)聽(tīng)回調(diào)（打印預(yù)覽中點(diǎn)擊“打印”或“取消”都可以回調(diào)）
}, options);
if ((typeof dom) === "string") {
this.dom = document.querySelector(dom);
} else {
this.isDOM(dom)
this.dom = this.isDOM(dom) ? dom : dom.$el;
}
this.init();
};
toPrint: function (frameWindow) {
let _this = this;
try {
setTimeout(function () {
frameWindow.focus();
typeof _this.options.onStart === 'function' && _this.options.onStart();
try {
if (!frameWindow.document.execCommand('print', false, null)) {
frameWindow.print();
}
} catch (e) {
frameWindow.print();
}
typeof _this.options.onEnd === 'function' && _this.options.onEnd();
frameWindow.close();
}, 10);
} catch (err) {
console.log('err', err);
}
},
核對(duì)你的print.js文件是否包含了上述監(jiān)聽(tīng)回調(diào)的內(nèi)容，沒(méi)有的話(huà)自行加上。
打印過(guò)程修改dom尺寸方法：
//由于打印內(nèi)容寬度過(guò)大，所以打印前先將dom縮小，打印完成之后恢復(fù)原尺寸
this.$refs.printDom.style.zoom = 0.6;
this.$print(this.$refs.printDom, {
type: "html",
documentTitle: "", // 標(biāo)題
style: "@page{size:auto;margin: 1cm ; size: }", // 去除頁(yè)眉頁(yè)腳
onStart: () => {
console.log("打印開(kāi)始");
},
onEnd: () => {
console.log("打印完成");
this.$refs.printDom.style.zoom = 1;
}
});
最后還需注意一個(gè)點(diǎn)，你的打印內(nèi)容遇到分頁(yè)時(shí)如果出現(xiàn)被截?cái)?/code>的情況下，需要處理下，在任何你不想截?cái)嗟哪K中加上如下css代碼即可；文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-455029.html
//避免打印截?cái)?page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;
擴(kuò)展：修改打印表格樣式
參考：https://blog.csdn.net/huyande123/article/details/103423362
簡(jiǎn)單總結(jié)的說(shuō)下：頁(yè)面打印樣式缺失可能是打印時(shí)新建的一個(gè)dom對(duì)象沒(méi)有將原來(lái)的頁(yè)面樣式傳遞過(guò)來(lái)，可以通過(guò)將一些相關(guān)的CSS傳遞到document.write（）方法中的新窗口來(lái)解決這個(gè)問(wèn)題。
關(guān)鍵代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-455029.html
var divToPrint = document.getElementById('box');
var htmlToPrint = '' +
'<style type="text/css">' +
'table {'+
'border-right:1px solid #000;' +
'border-bottom:1px solid #000;'+
'}' +
'table td{'+
'border-left:1px solid #000;'+
'border-top:1px solid #000'+
'}'+
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
到了這里，關(guān)于Vue——printjs打印el-table,echarts等打印不全，異常解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
