vue2文件流图片打印功能

最新推荐文章于 2025-05-15 17:39:04 发布

原创最新推荐文章于 2025-05-15 17:39:04 发布 · 550 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文介绍了如何使用JavaScript处理接口返回的文件流，创建一个图片元素并在新窗口中进行预览和打印，涉及到了Blob对象、canvasAPI和浏览器对象URL的使用。

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

先看效果图

js代码部分

    print() {
      const url = window.URL.createObjectURL(new Blob([res]));//res为接口返回的文件流
      const img = document.createElement("img");
      img.src = url;
      console.log(img.src);
      img.onload = function () {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        // 设置画布的宽高和图片的尺寸一致
        canvas.width = img.width;
        canvas.height = img.height;
        // 将图片绘制到画布上
        context.drawImage(img, 0, 0);
        // 创建一个新窗口打开打印预览
        const printWindow = window.open("", "_blank");
        printWindow.document.write(
          "<html><head><title></title></head><body></body></html>"
        );
        // 将画布绘制的图片添加到新窗口中
        const printImg = document.createElement("img");
        printImg.src = canvas.toDataURL();
        printWindow.document.body.appendChild(printImg);
        printImg.onload = function () {
          // 在新窗口中打印
          printWindow.print();
          printWindow.close();
        };
      };
      this.getList();
    },