vue前端实现打印功能

是小芳芳呀

已于 2022-06-09 19:50:37 修改

阅读量5.3k

点赞数 3

分类专栏：前端文章标签：前端 javascript html vue.js

于 2022-06-07 14:19:49 首次发布

本文链接：https://blog.youkuaiyun.com/love521334421/article/details/125163942

版权

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

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

方案一：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&