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打印不全
image.png
方法一：修改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"
);
console.log(tableNode);
//el-table 打印預(yù)覽的時(shí)候歉糜，寬度占滿
for (let k6 = 0; k6 < tableNode.length; k6++) {
const tableItem = tableNode[k6];
tableItem.style.width = "100%";
}
return this.dom.outerHTML;
},
image.png
方法二：將el-table改為table（雖然麻煩但是好用）
利用table分頁(yè)可以讓行不被截?cái)嗲颐恳豁?yè)都有表頭
參考如下鏈接：
http://www.reibang.com/p/4d90efbae014
方法三：結(jié)合html2Canvas將打印的頁(yè)面轉(zhuǎn)為圖片
這條同樣可以解決echarts不能打印問題，算是萬(wàn)能之法了吧望众，相對(duì)前面幾種方式趕緊這個(gè)方法最簡(jiǎn)單匪补，打印效果也比較理想。
1烂翰、首先需要安裝html2canvas 和print-js 插件并引入夯缺，配置請(qǐng)參考文檔：https://github.com/niklasvh/html2canvas
2、寫一個(gè)打印公共方法：
//html轉(zhuǎn)圖片打痈使ⅰ（解決element table打印不全的問題）
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, // 解決水平偏移問題毁葱，防止打印的內(nèi)容不全
scrollY: -scrollTop
//background: "#ffffff", // 一定要添加背景顏色垫言，否則出來的圖片，背景全部都是透明的
})
.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("打印開始");
},
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 => {});
});
