vue打印页面自定义内容

最新推荐文章于 2024-06-21 11:38:25 发布

SKMA

最新推荐文章于 2024-06-21 11:38:25 发布

阅读量257

点赞数

文章标签： vue.js javascript 前端框架前端

本文链接：https://blog.csdn.net/Sk22582/article/details/131243717

版权

printContent() {
      // 获取要打印的容器
      const printContainer = document.getElementById('print-content');
      html2canvas(printContainer, {useCORS: true}).then(canvas => {
        // 创建一个新的窗口，以打开打印预览
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        // 构建打印页面的内容
        const printDocument = `
          <html lang="">
            <head>
              <style>
                @page {
                  size: A4;
                  margin: 5mm 0 6mm 0;
                }
                .printed-page {
                  max-height: calc(100vh - 13mm);
                  /*overflow: hidden;*/
                  page-break-inside: avoid;
                }
                .printed-image {
                  max-width: 100%; /* 图片宽度不超过父容器 */
                  height: auto; /* 保持图片宽高比例 */
                }
              </style>
              <title></title>
            </head>
            <body>
                <div class="printed-page">
                    <img class="printed-image" src="${canvas.toDataURL()}" alt=""/>
                </div>
            </body>
          </html>
        `;
        // 将打印页面的内容写入新窗口并打印
        printWindow.document.write(printDocument);
        printWindow.document.close();
        this.$nextTick(() => {
          printWindow.print();
          printWindow.close();
        })

      });
    },