vue项目实现多元素打印

最新推荐文章于 2024-09-30 16:19:08 发布

SKMA

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量120

点赞数

文章标签： vue.js javascript 前端

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

版权

printContent(v) {
      this.active = v
      let data = {
        id: this.id,
        quantityFy: this.quantityFy || 0
      }
      if(v===2){
        updateQuantityById(data).then(res=>{
          console.log(res)
        })
      }
      this.$nextTick(()=>{
        // 获取要打印的容器
        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();
          })
        });
      })
    },