前端点击按钮后，不在当前页面显示内容，使用html2canvas插件实现打印功能

最新推荐文章于 2024-05-17 07:46:48 发布

闲岁️

最新推荐文章于 2024-05-17 07:46:48 发布

阅读量754

点赞数 1

分类专栏：技术功能文章标签：前端 javascript 经验分享封装

本文链接：https://blog.csdn.net/weixin_48027328/article/details/127073216

版权

本文介绍了前端如何利用html2canvas插件实现在不改变页面原有显示的情况下，点击按钮进行内容打印。关键在于正确设置要打印内容的容器元素样式，避免使用display:none或透明度为0，以确保打印页面正常显示。

摘要由CSDN通过智能技术生成

前端先根据模板写好页面排版等，然后设置要打印的内容容器元素为不可见，不影响页面原来的内容显示，比如绝对定位后设置z-index为-999。

注意：原页面内容的显示方式和透明度等在调用打印功能时都会传递到打印页面，所以不能设置透明度为0或者display为none等==>这样会导致打印的页面上什么都看不见。

handlePrint的参数id为页面上要打印的内容的容器id

function handlePrint(id, callback) {
   
  // 先用html2canvas将页面整个转为一张截图，再打印，防止出现echarts无法打印
  const dom = document.getElementById(id);
  html2canvas(dom, {
   
    scale: 2,
    width: dom.offsetWidth,
    height: dom.offsetHeight,
  }).then((canvas) => {
   
    const context = canvas.getContext('2d'