前端實現docx、pdf格式文件線上預覽

来源:https://www.cnblogs.com/wanna2leo/archive/2022/09/22/16717991.html
-Advertisement-
Play Games

介紹 在業務中,如果遇到文檔管理類的功能,會出現需要線上預覽的業務需求,本文主要是通過第三方庫來實現文檔預覽功能,並將其封裝成preview組件 docx docx的實現需要使用docx-preview插件 安裝 npm i docx-preview 使用 創建一個容器標簽 <div ref="fi ...


介紹

在業務中,如果遇到文檔管理類的功能,會出現需要線上預覽的業務需求,本文主要是通過第三方庫來實現文檔預覽功能,並將其封裝成preview組件

docx

docx的實現需要使用docx-preview插件

安裝

npm i docx-preview

使用

創建一個容器標簽

<div ref="file" v-show="extend == 'docx'"></div>

引入並創建渲染函數

import { renderAsync } from "docx-preview";
renderDocx() {
      renderAsync(this.fileData, this.$refs.file, null, {
        className: "docx", //預設和文檔樣式類的類名/首碼
        inWrapper: true, //啟用圍繞文檔內容呈現包裝器
        ignoreWidth: false, //禁用頁面的渲染寬度
        ignoreHeight: false, //禁用頁面的渲染高度
        ignoreFonts: false, //禁用字體渲染
        breakPages: true, //在分頁符上啟用分頁
        ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分頁
        experimental: false, //啟用實驗功能(製表符停止計算)
        trimXmlDeclaration: true, //如果為true,則在解析之前將從xml文檔中刪除xml聲明
        useBase64URL: false, //如果為true,圖像、字體等將轉換為base 64 URL,否則使用URL.createObjectURL
        useMathMLPolyfill: false, //包括用於鉻、邊等的MathML多填充。
        showChanges: false, //啟用文檔更改的實驗渲染(插入/刪除)
        debug: false, //啟用額外的日誌記錄
      });
    },

PDF

pdf的預覽需要使用PDFJS這個插件,通過將文件流解析寫到canvas上實現預覽效果

安裝

npm i pdfjs-dist

引入和使用

<canvas
  v-for="num in numPages"
  :key="num"
  :id="'canvas_' + num"
  class="canvas"
></canvas>

此處pdf的渲染數據this.fileData必須是一個ArrayBuffer格式的數據,如果請求的的數據是Blob格式必須要先使用Blob.arrayBuffer()轉換

async renderPdf(num = 1) {
      this.fileData.getPage(num).then(page => {
        // 設置canvas相關的屬性
        const canvas = document.getElementById("canvas_" + num);
        const ctx = canvas.getContext("2d");
        const dpr = window.devicePixelRatio || 1;
        const bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        const ratio = dpr / bsr;
        const viewport = page.getViewport({ scale: this.pdfScale }); // 設置放縮比率
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        canvas.style.height = viewport.height + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        // 數據渲染到canvas畫布上
        page.render(renderContext);
        if (this.numPages > num) {
          setTimeout(() => {
            return this.renderPdf(num + 1);
          });
        }
      });
    },

pdf的放大和縮小

pdf文件渲染後如果不能調整大小會因為源文件的大小和文件內容,出現模糊的問題,所以進行縮放渲染是有必要的

// pdf放大
setPdfZoomin() {
  const max = 2;
  if (this.pdfScale >= max) {
    return;
  }
  this.pdfScale = this.pdfScale + 0.2;
  this.renderPdf();
},
// pdf縮小
setPdfZoomout() {
  const min = 0.6;
  if (this.pdfScale <= min) {
    return;
  }
  this.pdfScale = this.pdfScale - 0.1;
  this.renderPdf();
},

多格式的文件渲染函數映射

因為將多種文件渲染放在一個文件中,所以處理函數需要做映射處理,執行對應格式的文件渲染

renderPreview(extend) {
    const handle = {
    docx: () => {
      this.extend = "docx";
      this.$nextTick(() => this.renderDocx());
    },
    pdf: () => {
      this.extend = "pdf";
      new Blob([this.fileData]).arrayBuffer().then(res => {
        PDFJS.getDocument(res).promise.then(pdfDoc => {
          this.numPages = pdfDoc.numPages; // pdf的總頁數
          this.fileData = pdfDoc;
          this.$nextTick(() => this.renderPdf());
        });
      });
    },
    };
    this.isLoading = false;
    if (!Object.hasOwn(handle, extend)) {
    this.extendName = extend;
    return (this.extend = "other");
    }
    handle[extend]();
},

不支持的文件提示處理

在這個文件中,目前只支持docx和pdf的預覽,如果出現了不支持的文件,需要增加一個提示處理,告知用戶
例如如下的文件提示

<div class="container" v-show="extend == 'other'">
  <a-alert
    :message="`不支持.${this.extendName}格式的線上預覽,請下載後預覽或轉換為支持的格式`"
    description="支持docx, pdf格式的線上預覽"
    type="info"
    show-icon
  />
</div>

總結

本文只是簡單的總結了關於文件預覽的純前端實現和封裝方式,對於業務的思路簡單整理,如果是對於有更複雜的場景,還需要有更加具體的拆分和優化。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的 generator函數 在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心 ...
  • Common JS 是模塊化規範之一。每個文件都是一個作用域,文件裡面定義的變數/函數都是私有的,對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。 ...
  • 接手的一個項目使用的是avue這個傻瓜式的專門給後端人員用的框架,文檔不夠友好,使用起來各種蛋疼(咱專業前端基本上不使用)。為此,專門記錄一下。當前avue版本2.8.12,如果要切換avue的版本,可以去https://cdn.jsdelivr.net/npm/@smallwei/[email protected] ...
  • REM rem是一個相對尺寸,它相對於html根元素來進行計算 類推3REM為48px。改變html根元素 font-size 屬性的大小。那麼REM值也會隨之改變。 html{ font-size: 50px; /* 預設 16px */ } 此時3REM為150px。接下來我們通過一個小案例來演 ...
  • 我的前端之旅。本節學習CSS媒體查詢(Media Quires),詳細介紹了媒體查詢語法定義,從三個具體佈局例子學習媒體查詢的使用技巧。並介紹了一些scss、css屬性知識。 ...
  • 每日3題 1 以下代碼執行後,控制臺中的輸出內容為? console.log(+true, !'hello') 2 點擊p標簽時,會輸出什麼 const numbers=[1,2,3,4,5] const [y] = numbers console.log(y) 3 以下代碼執行後,控制臺中的輸出內 ...
  • 背景 大家有沒有這麼一種困境 我現在需要去配置一個定時任務:"每天早上九點執行任務" 若你有一個好的定時任務平臺,相信很容易就能配置完成。那若是沒有定時任務平臺呢?是不是就要自己寫cron表達式 那 "每天早上九點執行任務" 的cron表達式怎麼寫呢? 這個時候我會去百度一些cron線上生成,因為我 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1.講故事 在分析的眾多dump中,經常會遇到各種奇葩的問題,僅通過dump這種快照形式還是有很多問題搞不定,而通過 perfview 這種粒度又太粗,很難找到問題之所在,真的很頭疼,比如本篇的 短命線程 問題,參考圖如下: 我們在 t2 時刻抓取的dump對查看 短命線程 毫無幫助,我根 ...
  • 在日常後端Api開發中,我們跟前端的溝通中,通常需要協商好入參的數據類型,和參數是通過什麼方式存在於請求中的,是表單(form)、請求體(body)、地址欄參數(query)、還是說通過請求頭(header)。 當協商好後,我們的介面又需要怎麼去接收這些數據呢?很多小伙伴可能上手就是直接寫一個實體, ...
  • 許多情況下我們需要用到攝像頭獲取圖像,進而處理圖像,這篇博文介紹利用pyqt5、OpenCV實現用電腦上連接的攝像頭拍照並保存照片。為了使用和後續開發方便,這裡利用pyqt5設計了個相機界面,後面將介紹如何實現,要點包括界面設計、邏輯實現及完整代碼。 ...
  • 思路分析 註冊頁面需要對用戶提交的數據進行校驗,並且需要對用戶輸入錯誤的地方進行提示! 所有我們需要使用forms組件搭建註冊頁面! 平時我們書寫form是組件的時候是在views.py裡面書寫的, 但是為了接耦合,我們需要將forms組件都單獨寫在一個地方,需要用的時候導入就行! 例如,在項目文件 ...
  • 思路分析 登錄頁面,我們還是採用ajax的方式提交用戶數據 唯一需要學習的是如何製作圖片驗證碼! 具體的登錄頁面效果圖如下: 如何製作圖片驗證碼 推導步驟1:在img標簽的src屬性里放上驗證碼的請求路徑 補充1.img的src屬性: 1.圖片路徑 2.url 3.圖片的二進位數據 補充2:字體樣式 ...
  • 哈嘍,兄弟們! 最近有許多小伙伴都在吐槽打工好難。 每天都是執行許多重覆的任務 例如閱讀新聞、發郵件、查看天氣、打開書簽、清理文件夾等等, 使用自動化腳本,就無需手動一次又一次地完成這些任務, 非常方便啊有木有?! 而在某種程度上,Python 就是自動化的代名詞。 今天就來和大家一起學習一下, 用 ...
  • 作者:IT王小二 博客:https://itwxe.com 前面小二介紹過使用Typora+PicGo+LskyPro打造舒適寫作環境,那時候需要使用水印功能,但是小二在升級LskyPro2.x版本發現有很多不如人意的東西,遂棄用LskyPro使用MinIO結合代碼實現自己需要的圖床功能,也適合以後 ...
  • OpenAI Gym是一款用於研發和比較強化學習演算法的工具包,本文主要介紹Gym模擬環境的功能和工具包的使用方法,並詳細介紹其中的經典控制問題中的倒立擺(CartPole-v0/1)問題。最後針對倒立擺問題如何建立控制模型並採用爬山演算法優化進行了介紹,並給出了相應的完整python代碼示例和解釋。要... ...
  • python爬蟲瀏覽器偽裝 #導入urllib.request模塊 import urllib.request #設置請求頭 headers=("User-Agent","Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, l ...
  • 前端代碼搭建 主要利用的是bootstrap3中js插件里的模態框版塊 <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密碼</a></li> <div class="modal fade bs-exam ...