vue打印带有ant-design样式

最新推荐文章于 2024-05-26 22:05:14 发布

苏轻

最新推荐文章于 2024-05-26 22:05:14 发布

阅读量1.0k

点赞数

分类专栏： Vue 前端文章标签： vue vue打印 antd

本文链接：https://blog.csdn.net/u012451520/article/details/117330532

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

本文探讨了在使用html2canvas将DOM转换为图片以进行打印时，如何处理ant-design样式丢失的问题。通过创建一个新的窗口，注入自定义样式并引入canvas数据URL，成功地在打印内容中保留了布局和文字，但未能应用Ant Design的样式。文章提供了一段JavaScript代码示例，展示如何实现这一过程。

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

打印带有ant-design样式，直接选择dom用html转没有ant样式，只能是文字和排版

打印内容外层包裹dom

利用html2canvas转换dom为图片，用image标签引入canvas即可

<div id="modal-body-print">

打印的整个dom
</div>

    print () {
      this.contentH = 'auto'
      const modalElement = document.getElementById('modal-body-print');
      html2canvas(modalElement).then(function (canvas) {
        setTimeout(() => {
          let mywindow = window.open('', '', 'height=800,width=1000'); // 新的窗口
          mywindow.document.write(`
                          <html>
                          <head>
                              <title></title>
                              <style type="text/css">
                                  @page { margin: 0; } body{ padding: 20px; }
                              </style>
                          </head>
                          <body>`);
          mywindow.document.write('<h1>' + document.title + '</h1>');
          mywindow.document.write(`<br><img src="${canvas.toDataURL()}"/>`);
          mywindow.document.write('</body></html>');
          mywindow.document.close(); //  IE >= 10 必要的兼容写法
          mywindow.focus(); //  IE >= 10*/ 必要的兼容写法
          mywindow.print();
          this.contentH = 150
        }, 200)
      });
    },