vue3 window.print()局部打印

最新推荐文章于 2025-04-11 15:26:02 发布

易de

最新推荐文章于 2025-04-11 15:26:02 发布

阅读量1.4k

点赞数 10

文章标签： vue.js javascript ecmascript

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/135623960

版权

本文介绍了在Vue3应用中使用window.print()进行局部打印时遇到的三个问题及其解决方案：1) 图片无法显示，通过转换为base64格式解决；2) el-table在打印时展示不全，改用原生表格；3) 分页表格在打印时显示全部数据，通过添加打印状态变量实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-button type="primary" @click="toPrint">打 印</el-button>

 <div class="container" id="printcontent">
   <div class="section" >
     	<!-- 打印时图片不展示的情况处理:把获取到的图片转为base64格式  -->
        <img id="imgMsg" :src="ruleForm.imgUrlBase64 ? ruleForm.imgUrlBase64 : ruleForm.imgUrl ? ruleForm.imgUrl : zanWuImg" />
   </div>
 </div>


function toPrint() {
   
  isPrint.value = true; // 如果打印展示的数据和页面展示的数据不一致，加一个变量来判断当前是打印状态还是展示状态
  window.addEventListener("beforeprint", (event) => {
   
    // 获取页面打印区域
    window.newstr = document.getElementById("printcontent").innerHTML;
    // 打印的区域赋给body（不是特别友好，打印区域会替换页面body）
    document.body.innerHTML = newstr;
  });
  setTimeout(() => {
   
    window.print({
   
      scale: 0.6, // 页面内容展示不全
    });
  }, 800);
  // 由于页面内容被替换，除打印区域外的所有内容包括按钮都会失效，所以页面需要重新加载
  window.onafterprint</