vue预览pdf 字节流

在 Vue 中预览 PDF 文件，我们可以使用 PDF.js 这个 JavaScript 库。PDF.js 可以将 PDF 文件流转换成 HTML 元素，从而在页面上实现预览效果。

具体步骤如下：

1. 引入 PDF.js 库：可以通过 npm 安装，在 Vue 中使用时需要在 main.js 文件中引入：

import pdfjsLib from 'pdfjs-dist';

2. 加载 PDF 文件流：可以通过 axios 等工具获取 PDF 文件流，在页面中使用时需要在 methods 属性中定义 loadPdfFile 方法：

methods: {
  loadPdfFile(url) {
    return axios.get(url, { responseType: 'arraybuffer' });
  }
}

3. 转换为 HTML 元素：通过 PDF.js 转换函数将 PDF 文件流转换成 HTML 元素：

let pdfDoc = null;

pdfjsLib.getDocument({ data: pdfArrayBuffer }).promise.then(function (pdf) {
  pdfDoc = pdf;
  
  // 获取第一页PDF的内容
  pdf.getPage(1).then(function(page) {
    // 获取缩放比例
    var viewport = page.getViewport({ scale: 1 });
    // 创建 Canvas 元素
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    // 将 PDF 渲染到 Canvas 上
    page.render(renderContext).promise.then(function() {
      // 将 Canvas 显示在页面上
      document.body.appendChild(canvas);
    });
  });
});

以上就是在 Vue 中预览 PDF 文件流的方法，通过 PDF.js 将 PDF 文件流转换为 HTML 元素并实现预览效果。