解决printJS打印图片时多出一张空白页的问题

RangeError

已于 2023-12-26 11:08:36 修改

阅读量1.1k

点赞数 12

文章标签： vue javascript html

于 2023-12-26 10:17:25 首次发布

本文链接：https://blog.csdn.net/qq_22689825/article/details/135215101

版权

解决printJS打印图片时多出一张空白页的问题

最开始的现象是打印的时候上方出现了一张空白页
在这里插入图片描述
解决方法是代码

style: `@media print { @page {size: auto; margin: 0; } body{margin:0; padding: 0;}}`,

解决上面的空白页后发现生成的图片还是太长了，打印A4的时候超出了一部分
在这里插入图片描述

解决方法是给图片设置了一个"height: 100vh;"让图片的高度等于视图高度，如果要分页打印的话就不能用这个配置。

完整代码

 const url = 图片base64
 printJS({
    printable: url,
    type: 'image',
    documentTitle: '',
    header: null,
    base64: true,
    style: `@media print { @page {size: auto; margin: 0; } body{margin:0; padding: 0;}}`,
    imageStyle: 'width: 100%; height: 100vh; margin:0; padding: 0;'
  })