vue前端实现打印功能

本文介绍了在Vue前端项目中实现打印功能的三种方案:1)使用window.print(),但存在局部打印困难和用户体验问题;2)通过iframe结合execCommand('Print'),需要注意样式加载时机;3)借助html2canvas生成图片并放入iframe中,可能需要调整截图清晰度。建议根据实际需求选择合适的方法。
摘要由CSDN通过智能技术生成

方案一:window.print()   

这个命令默认打印整个页面的内容,所以,如果想要实现局部打印功能的话,就要重新给body赋值,并且后续执行完之后再还原回去,这样的话会造成一些非预期的结果,很麻烦并且在当前也操作,window.document.body的内容重新渲染,打印完会有刷新,影响用户的体验所以不推荐

方案二:利用iframe,iframe.contentDocument.execCommand('

Print')

<template>
    <div>
        <!--需要打印的页面的某个div-->
        <div id="dynamic-table-page">
            <div>我是需要打印的内容</div>
        </div>
        <!--打印用的隐藏的iframe-->
        <iframe width="0" height&
  • 3
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
实现Vue前端打印的方法有多种。其中一种方法是通过引入打印插件来实现。你可以在后台功能中查询合适的插件并进行下载,然后在前端中使用该插件来进行打印操作。 另外,需要注意的是在处理打印逻辑之前,要确保样式已经正确引入,否则打印的页面可能会没有样式。你可以单独引入一个print.scss文件或者使用@media print {}来调整一些样式。这样可以确保打印页面的样式与预期一致。 如果打印的内容中包含线上图片资源,并且你不想进行服务器配置,可以考虑在浏览器关闭获取缓存文件的方式来解决。这样可以保证每一次获取的都是线上文件,避免打印时出现图片跨域的错误。需要注意的是,前端无法获取你点击打印或者取消的事件,只能获取你是否关闭打印框的事件。 综上所述,你可以通过下载适合的打印插件来实现Vue前端打印功能,并在处理打印逻辑前确保样式已正确引入。如果打印内容中包含线上图片资源,可以通过浏览器关闭获取缓存文件的方式来避免跨域错误。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue 前端实现打印功能](https://blog.csdn.net/m0_64344940/article/details/128405517)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue前端实现打印功能](https://blog.csdn.net/love521334421/article/details/125163942)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值