当前位置：首页 > VUE

vue实现打印文件流

2026-01-22 23:39:19VUE

Vue 实现打印文件流

在 Vue 中实现打印文件流（如 PDF、图片或其他二进制数据）通常涉及接收后端返回的文件流，将其转换为可打印的格式，并调用浏览器的打印功能。以下是具体实现方法：

接收文件流并转换为可打印对象

通过 axios 或其他 HTTP 库请求文件流时，设置 responseType: 'blob' 以正确接收二进制数据。

axios.get('/api/download-file', {
  responseType: 'blob'
}).then(response => {
  const blob = new Blob([response.data], { type: response.headers['content-type'] });
  const fileUrl = URL.createObjectURL(blob);
  printFile(fileUrl);
});

实现打印功能

创建一个隐藏的 iframe 或新窗口加载文件流，并调用打印功能。

function printFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);

  iframe.onload = () => {
    setTimeout(() => {
      iframe.contentWindow.print();
      URL.revokeObjectURL(url); // 释放内存
      document.body.removeChild(iframe);
    }, 500);
  };
}

处理 PDF 文件

若打印 PDF，可直接使用浏览器原生支持或嵌入 PDF 查看器（如 pdf.js）。

// 使用 embed 标签预览 PDF
const embed = document.createElement('embed');
embed.style.display = 'none';
embed.src = `${url}#toolbar=0&view=FitH`;
embed.type = 'application/pdf';
document.body.appendChild(embed);

embed.onload = () => {
  embed.contentWindow.print();
};

注意事项

跨域限制：确保文件流来源允许跨域访问，否则打印可能失败。
类型匹配：Blob 的 type 需与文件类型一致（如 application/pdf）。
用户体验：添加加载状态提示，避免用户误操作。

完整示例代码

// Vue 组件方法
methods: {
  async handlePrint() {
    try {
      const response = await axios.get('/api/file', {
        responseType: 'blob'
      });
      const blob = new Blob([response.data], { 
        type: response.headers['content-type'] 
      });
      this.printBlob(blob);
    } catch (error) {
      console.error('打印失败:', error);
    }
  },
  printBlob(blob) {
    const url = URL.createObjectURL(blob);
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = url;
    document.body.appendChild(iframe);

    iframe.onload = () => {
      iframe.contentWindow.print();
      URL.revokeObjectURL(url);
      document.body.removeChild(iframe);
    };
  }
}

vue实现打印文件流