vue项目怎么使用pdf.js 和docx-preview实现docx文件和pdf文件的在线预览功能

后端代码：

        SshConfig sshConfig = new SshConfig("ip", port, "username", "password");
        ChannelSftp channelSftp = sshConfig.getChannelSftp();

        String downUrl = "/**/**/";//服务器相对路径
        String pathname1 = downUrl + fileId + ".docx";
        String pathname2 = downUrl + fileId + ".pdf";

        InputStream inputStream1 = null;
        InputStream inputStream2 = null;

       //文件可能是docx或者pdf，因此需要分别尝试获取文件输入流
        try {
            inputStream1 = channelSftp.get(pathname1);
        } catch (SftpException e) {
            inputStream2 = channelSftp.get(pathname2);
        }

        byte[] buffer = new byte[1024];
        int bytesRead;
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        if (inputStream1 != null) {
            while ((bytesRead = inputStream1.read(buffer)) != -1) {
                output.write(buffer, 0, bytesRead);
            }
            byte[] fileBytes1 = output.toByteArray();
            // 现在fileBytes中包含了远程文件的字节流
            if (fileBytes1 != null) {
                channelSftp.disconnect();
                sshConfig.disconnect();
                // Convert the file to base64
                String base64 = Base64.getEncoder().encodeToString(fileBytes1);
                map.put("fileUrl", pathname1);
                map.put("base64", base64);
                return map;
            }
        } else {
            while ((bytesRead = inputStream2.read(buffer)) != -1) {
                output.write(buffer, 0, bytesRead);
            }
            byte[] fileBytes1 = output.toByteArray();
            // 现在fileBytes中包含了远程文件的字节流
            if (fileBytes1 != null) {
                channelSftp.disconnect();
                sshConfig.disconnect();
                // Convert the file to base64
                String base64 = Base64.getEncoder().encodeToString(fileBytes1);
                map.put("fileUrl", pathname2);
                map.put("base64", base64);
                return map;
            }
        }

        return map;

前端代码：

mounted方法中判断使用哪一个插件 

  mounted() {
    let fileUrl = sessionStorage.getItem("fileUrl");
    if (fileUrl.indexOf('.docx') !== -1) {
      let bstr = sessionStorage.getItem("bstr");
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      console.log("docx");
      //u8arr.buffer 转成arrayBuffer类型
      this.docxRender(u8arr.buffer, this.title);
    } else {
      let bstr = sessionStorage.getItem("bstr");
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      this.pdfData = u8arr;
      console.log("pdf");
      this.pdfReader(u8arr);
    }

  },

docx文件的渲染

    //渲染docx
    docxRender(buffer, fileName) {
      let box = document.createElement('div')  // 创建一个div
      let docx = require("docx-preview")
      docx.renderAsync(buffer, box).then(() => {  // 渲染文件
        let zhengwen = document.getElementById('zhengwen');
        zhengwen.appendChild(box);
        //document.write(box.outerHTML);
        //渲染文件后将div添加到新窗口中，div不能提前添加，否则新窗口中不能渲染出文件
        //注意这里不能直接用box
        document.title = fileName // 窗口标题
        document.getElementsByClassName('docx')[0].style.width = 'auto'
        // 如果文件显示正常，不用设置宽度
      }).catch(function () {
        Message({
          type: "error",
          message: "该文档可能已损坏，请尝试下载查阅"
        })
      })
    },

渲染效果图：

pfd文件渲染：

    //渲染pdf
    pdfReader(u8arr) {
      // 获取PDF容器元素
      let container = this.$refs.pdfContainer;

      // 配置PDFJS worker路径
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
      // 加载PDF文件流
      pdfjsLib.getDocument(u8arr).promise.then((pdf) => {
        // 获取页面数量
        const numPages = pdf.numPages;
        // 循环遍历所有页面
        for (let i = 1; i <= numPages; i++) {
          pdf.getPage(i).then((page) => {
            // 设置缩放比例
            const scale = 1.7;
            // 获取渲染上下文
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            // 计算画布大小
            const viewport = page.getViewport({scale});
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            // 将PDF页面渲染到画布上
            const renderContext = {
              canvasContext: ctx,
              viewport: viewport
            };
            page.render(renderContext);
            // 添加画布到容器中
            container.appendChild(canvas);
          });
        }
      }).catch(function () {
        Message({
          type: "error",
          message: "该文档可能已损坏，请尝试下载查阅"
        })
      });
    },

 注意，使用前需要下载相应的库,docx-preview工具不适用于渲染doc文件，需要自己去转换文件类型（比如直接修改文件后缀名）

npm install pdfjs-dist
npm install docx-preview