解决vue使用print.js打印多个图片，图片过大溢出问题

最新推荐文章于 2024-10-14 08:45:00 发布

大大呱_lxm

最新推荐文章于 2024-10-14 08:45:00 发布

阅读量594

点赞数 19

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_58324166/article/details/140987599

版权

一、下载安装print.js

1.使用npm安装

npm install print-js --save

2.使用yarn安装

yarn add print-js

2.通过npm或yarn安装时，将库导入到项目中

import print from 'print-js'

二、代码部分

1.html部分

<div id="printDiv" style="display:none;"></div>

2.js部分

点击打印按钮，将此段代码放入方法中，即可

//打印
document.querySelector('#printDiv').style.display = 'block';
    printJS({
    printable: this.printList,//pdf或图像url，html元素id，或json数据对象
    type: 'image',//类型'pdf'，'html'，'image'和'json'四种
    header: null,
    style: `@media print { body{margin:0; padding: 0;}}`,
    imageStyle: `display: block;margin: 0 auto;max-width:100%;max-height:100vh;object-fit:scale-down;`//图片的样式,如果想让每一张图片都是一页，请在图片样式中加'page-break-after: always;'
    })
//获取打印内容后隐藏dom
document.querySelector('#printDiv').style.display = 'none';