亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預(yù)覽

 更新時間:2025年03月12日 09:57:50   作者:當new作碼  
這篇文章主要為大家詳細介紹了在Vue中使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預(yù)覽的相關(guān)知識,文中的示例代碼講解詳細,需要的可以參考下

后端代碼:

        SshConfig sshConfig = new SshConfig("ip", port, "username", "password");
        ChannelSftp channelSftp = sshConfig.getChannelSftp();
 
        String downUrl = "/**/**/";//服務(wù)器相對路徑
        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();
            // 現(xiàn)在fileBytes中包含了遠程文件的字節(jié)流
            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();
            // 現(xiàn)在fileBytes中包含了遠程文件的字節(jié)流
            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 轉(zhuǎn)成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')  // 創(chuàng)建一個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'
        // 如果文件顯示正常,不用設(shè)置寬度
      }).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) => {
        // 獲取頁面數(shù)量
        const numPages = pdf.numPages;
        // 循環(huán)遍歷所有頁面
        for (let i = 1; i <= numPages; i++) {
          pdf.getPage(i).then((page) => {
            // 設(shè)置縮放比例
            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: "該文檔可能已損壞,請嘗試下載查閱"
        })
      });
    },

注意,使用前需要下載相應(yīng)的庫,docx-preview工具不適用于渲染doc文件,需要自己去轉(zhuǎn)換文件類型(比如直接修改文件后綴名)

npm install pdfjs-dist
npm install docx-preview

以上就是Vue使用pdf.js和docx-preview實現(xiàn)docx和pdf的在線預(yù)覽的詳細內(nèi)容,更多關(guān)于Vue文件在線預(yù)覽的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue常用的幾個指令附完整案例

    Vue常用的幾個指令附完整案例

    越來越多的人在用Vue,剛開始接觸vue的話常接觸的指令就幾個,統(tǒng)一歸納一下。感興趣的朋友跟隨小編一起看看吧
    2018-11-11
  • vue隱藏路由的實現(xiàn)方法

    vue隱藏路由的實現(xiàn)方法

    這篇文章主要介紹了vue隱藏路由的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 如何為Vue3提供一個可媲美Angular的ioc容器

    如何為Vue3提供一個可媲美Angular的ioc容器

    ue3因其出色的響應(yīng)式系統(tǒng),以及便利的功能特性,完全勝任大型業(yè)務(wù)系統(tǒng)的開發(fā),這篇文章主要介紹了如何為Vue3提供一個可媲美Angular的ioc容器,需要的朋友可以參考下
    2024-08-08
  • Vue的指令中實現(xiàn)傳遞更多參數(shù)

    Vue的指令中實現(xiàn)傳遞更多參數(shù)

    這篇文章主要介紹了Vue的指令中實現(xiàn)傳遞更多參數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue3中的執(zhí)行流程思路分析-流程圖

    Vue3中的執(zhí)行流程思路分析-流程圖

    這篇文章主要介紹了Vue3中的執(zhí)行流程思路分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 詳解vue實現(xiàn)坐標拾取器功能示例

    詳解vue實現(xiàn)坐標拾取器功能示例

    這篇文章主要介紹了詳解vue實現(xiàn)坐標拾取器功能示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • vue實現(xiàn)原理this.$message實例詳解

    vue實現(xiàn)原理this.$message實例詳解

    這篇文章主要介紹了vue實現(xiàn)原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • 在uni-app中使用vant組件的方法

    在uni-app中使用vant組件的方法

    最近在做uni-app的時候需要用到vant組件,在網(wǎng)上看到了很多的使用vant組件的方法,但是講解的大多繁瑣,或者無法使用,現(xiàn)把最新,最實用的vant組件的使用方法分享給大家,需要的朋友可以參考下
    2023-02-02
  • vue3中vite.config.js相關(guān)常用配置超詳細講解

    vue3中vite.config.js相關(guān)常用配置超詳細講解

    在Vue3項目中vite.config.js文件是Vite構(gòu)建工具的配置文件,它用于定義項目的構(gòu)建和開發(fā)選項,這篇文章主要介紹了vue3中vite.config.js相關(guān)常用配置的相關(guān)資料,需要的朋友可以參考下
    2025-04-04
  • 關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題

    關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題

    這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06

最新評論