vue项目用print（）打印的页面里面有图片但是打印预览的时候图片不显示

原创于 2025-05-21 09:08:40 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

图片不显示的打印方式

print() { 
   let print = this.$refs[this.activeName].$refs.print.innerHTML;  // 获取打印内容
   let printPart = print + printStyle; // 拼接打印样式
   let newTab = window.open("_blank"); // 打开新窗口
   newTab.document.body.innerHTML = printPart; // 将打印内容注入新窗口
   newTab.print(); // 调用打印功能
   newTab.close(); // 打印完成后关闭窗口
}

直接通过iframe 的方式进行打印，完美解决

print () {
  const iframe = document.createElement('iframe'); // 创建iframe
  iframe.style.display = 'none'; // 隐藏iframe
  document.body.appendChild(iframe); // 将iframe添加到body中
  const content = this.$el.innerHTML; // 获取需要打印的内容
  iframe.contentDocument.write(content); // 将内容写入iframe中
  iframe.contentDocument.close(); // 关闭iframe的文档写入
  // 当iframe加载完成后执行打印操作
  iframe.contentWindow.onload = () => { 
    iframe.contentWindow.print();
    document.body.removeChild(iframe);
  };
}