具体实现参考：https://blog.csdn.net/admin11196/article/details/116168923
这条同样可以解决echarts不能打印问题，算是万能之法了吧，相对前面几种方式赶紧这个方法最简单，打印效果也比较理想。
1、首先需要安装html2canvas 和print-js 插件并引入，配置请参考文档：https://github.com/niklasvh/html2canvas
2、写一个打印公共方法：
import html2canvas from "html2canvas";
import printJS from "print-js";
* html转图片
* @param printContent
* @param callback
export const html2Canvas = (printContent, callback) => {
const width = printContent.clientWidth;
const height = printContent.clientHeight;
const canvas = document.createElement("canvas");
const scale = 4;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width * scale + "px";
canvas.style.height = height * scale + "px";
canvas.getContext("2d").scale(scale, scale);
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft;
html2canvas(printContent, {
canvas,
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
scrollX: -scrollLeft,
scrollY: -scrollTop
.then(canvas => {
const url = canvas.toDataURL("image/png");
callback({ url: url });
.catch(err => {
console.error(err);
});
* 用printJs打印图片
* @param url
* @param callback
export const printImg = (url, callback) => {
printJS({
printable: url,
type: "image",
documentTitle: "",
style: "@page{size:auto;margin: 1cm ;}",
onStart: () => {
console.log("打印开始");
onEnd: () => {
console.log("打印完成");
});
* html转图片打印
* @param dom
* @param callback
export const html2CanvasPrint = (dom, callback) => {
html2Canvas(dom, canvasRes => {
printImg(canvasRes.url, callback);
});
3、调用方法：
html2Canvas(this.$refs.printDom, res => {
this.printDomUrl = res.url;
printImg(res.url, printRes => {});
});
更多内容参考：https://blog.csdn.net/weixin_40466351/article/details/115908035
注意：遇到大坑啊，html转图片的方式在windows上面打印预览没有任何问题，但是在Mac上面所有的字体间距均被放大，页面简直错的离谱啊，无奈又换回方法二，通过调整dom打印缩放解决了。
具体方法如下：
-
修改print.js的getHtml方法，参考方法一的内容；
-
在开始打印前缩小dom的尺寸；打印结束后恢复dom的原尺寸；
print.js监听打印预览的关键代码：
const Print = function (dom, options) {
if (!(this instanceof Print)) return new Print(dom, options);
this.options = this.extend({
'noPrint': '.no-print',
onStart: function () {},
onEnd: function () {}
}, 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);
核对你的print.js文件是否包含了上述监听回调的内容，没有的话自行加上。
打印过程修改dom尺寸方法：
this.$refs.printDom.style.zoom = 0.6;
this.$print(this.$refs.printDom, {
type: "html",
documentTitle: "",
style: "@page{size:auto;margin: 1cm ; size: }",
onStart: () => {
console.log("打印开始");
onEnd: () => {
console.log("打印完成");
this.$refs.printDom.style.zoom = 1;
});
最后还需注意一个点，你的打印内容遇到分页时如果出现被截断的情况下，需要处理下，在任何你不想截断的模块中加上如下css代码即可；
//避免打印截断
page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;
参考：https://blog.csdn.net/huyande123/article/details/103423362
简单总结的说下：页面打印样式缺失可能是打印时新建的一个dom对象没有将原来的页面样式传递过来，可以通过将一些相关的CSS传递到document.write（）方法中的新窗口来解决这个问题。
关键代码：
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();
解决打印多页只出现一页问题
由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装
下载 print.js
https://github.com/zxc19890923/print/blob/master/print.js
在src目录下面创建plugins/pri
网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样
这里是看到了两个源码
https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js
https://github.com/denghao123/Print.js
以下是我修改过的
print.js
// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
if (!(this instanceof Print)) return new
npm 安装npm安装时将库导入项目首先，我们需要在页面上包含Print.js库和样式下面主要介绍一下我们要用的打印方法printJS();与相同，这将处理任何一系列样式。例如：['border'，'padding']，将包括'border-bottom'，'border-top'，'border-left'，'border-right'，'padding-top'等。你也可以传递['*']来处理所有样式打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。...
任务：解决vue页面局部打印功能
print.js插件，可以打印 html、pdf、json数据
官网：https://printjs.crabbly.com/
一个整理的很好的讲解:https://www.jianshu.com/p/bc079fbb20c7
一、步骤：
1.安装插件
npm install print-js --save
2.在需要打印的页面导入库
import print from 'print-js'
3.在vue文件中新建一个打印div盒子 ，设一个 id 值（printB
这样打印出来的会很丑，而且分页打印的时候没有表头，阅读起来不是很方便。
使用 thead、tbody两个标签解决，使用thead标签包裹表头，使用tbody标签包裹表体，例如下图
<table>
<thead>
<th>City</th>
昨天静姐交给我一个打印的需求，开始想着导出到word在打印，后来洪肖哥说那样太麻烦，直接在页面上打印比较快，所以就有了这篇博客。
实现过程：
1. 查询数据库，前台得到json
2. 拼接表格
3. 打印
遇到的问题
打印预览css失效
一页打印不下，必须两个页面，但是第一个和第二个页面中间出现表格中断的现象，特别丑
解决方案
一、css...
问题原因：el-table会计算100%宽度为具体多少px 然后再计算出每一列的宽度 通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px与打印纸的宽度不一致 所以导致部分区域打印不出来。3.那就从需要打印的dom入手，最终找到了上述代码，直接改变dom里table和cell的width属性。1.设置col的具体宽度，达到匹配打印区域的px？：做打印功能时，用window.print()遇到了el-table打印不全，缺失了一些列表。
前言 在实际的项目中还是有很多图片懒加载的需求，尤其是c端的应用，在一些列表页，像商品列表等含有大量图片展示。我们能做的一个优化项就是对未进入当前视口的图片元素，延迟加载，减少一进入页面时的请求数。图片的懒加载从实现上来说，就是一开始不设置 img 元素的 src，在上滑过程中，当图片滚动到可见时才进行加载，触发 src 设置。这里暂时只介绍在 vue 中基于自定义指令如何实现，原生 j...
