一文詳解如何在vue中實現(xiàn)文件預覽功能
更新時間：2022年10月12日 11:04:28 作者：世界和平?????
很多Vue項目中都需要PDF文件預覽功能,比如合同ERP,銷售CRM,內(nèi)部文檔CMS管理系統(tǒng),內(nèi)置PDF文件在線預覽功能,下面這篇文章主要給大家介紹了關于如何在vue中實現(xiàn)文件預覽功能的相關資料,需要的朋友可以參考下
文件流
如何將各種文件的文件流(blob)轉化為線上可以直接預覽的數(shù)據(jù)，這里簡單介紹四種不同類型的文件預覽。分別是pdf，docx，xlsx，jpg/png/jpeg等。有一個事情是需要重點注意的，文件流必須保證能夠被正常下載解析后才可以支持預覽，否則以下使用的各種插件都可能會產(chǎn)生報錯。（需著重關注文件加解密后文件是否會出現(xiàn)損壞的問題）
以下是從后端獲取到的文件流形式：
docx的預覽
通過借助插件docx-preview實現(xiàn)。
① 首先安裝該插件
npm install docx-preview
② 引入對應包
import { renderAsync } from 'docx-preview';
③調(diào)用函數(shù)，解析docx文件
renderAsync(res.data, document.getElementById("preload_box"), null, {
className: "docx", // 默認和文檔樣式類的類名/前綴
inWrapper: true, // 啟用圍繞文檔內(nèi)容渲染包裝器
ignoreWidth: false, // 禁止頁面渲染寬度
ignoreHeight: false, // 禁止頁面渲染高度
ignoreFonts: false, // 禁止字體渲染
breakPages: true, // 在分頁符上啟用分頁
ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分頁
experimental: false, //啟用實驗性功能（制表符停止計算）
trimXmlDeclaration: true, //如果為真，xml聲明將在解析之前從xml文檔中刪除
debug: false, // 啟用額外的日志記錄
})
pdf的預覽
① 首先安裝該插件
npm install pdfjs-dist
② 引入對應包
import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; // 引入PDFJS import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
③調(diào)用函數(shù)，解析pdf文件
const blobPdf = new window.Blob([res.data], { type: 'application/pdf;chaset-UTF-8' })
const pdfhref = URL.createObjectURL(blobPdf);
PDFJS.getDocument(pdfhref).promise.then(pdfDoc=>{
const numPages = pdfDoc.numPages; // pdf的總頁數(shù)
// 獲取第1頁的數(shù)據(jù)
pdfDoc.getPage(1).then(page =>{
// 設置canvas相關的屬性
const canvas = document.getElementById("pdf_canvas");
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: 1 });
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,
};
// 數(shù)據(jù)渲染到canvas畫布上
page.render(renderContext);
})
})
關于pdf的解析這里有幾個問題需要注意：
1.我們?yōu)榱苏_解析pdf，將pdf文件流轉化為一個blob的地址去被解析器讀取。
2.由于插件每次只能查詢pdf文件一頁數(shù)據(jù)，所以我們需要額外添加翻頁的邏輯代碼。
3.被pdf渲染的元素pdf_canvas必須是canvas標簽。
以下為翻頁的代碼：
// 切換pdf頁數(shù)
function changePdfPage (type) {
if (type == 'pre') {
if (pdfPage.value <= 1) {
ElMessage.error('沒有上一頁了');
return
}
pdfPage.value -= 1
} else {
if (pdfPage.value >= pdfValue.numPages) {
ElMessage.error('沒有下一頁了');
return
}
pdfPage.value += 1
}
initPdfPage()
}
// 重新初始化pdf對應頁數(shù)
function initPdfPage () {
pdfValue.getPage(pdfPage.value).then(page =>{
// 設置canvas相關的屬性
const canvas = document.getElementById("pdf_canvas");
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: 1 });
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,
};
// 數(shù)據(jù)渲染到canvas畫布上
page.render(renderContext);
})
}
xlsx預覽
① 首先安裝該插件
npm install xlsx
② 引入對應包
import * as XLSX from 'xlsx/xlsx.mjs'
<div class="sheet_list">
<p class="sheet_item" v-for="(item, index) in workbook.SheetNames" @click="getTable(item)">{{item}}</p>
</div>
<el-table :data="excelData" style="width: 100%">
<el-table-column
v-for="(value, key, index) in excelData[0]"
:key="index"
:prop="key"
:label="key"
></el-table-column>
</el-table>
const xlsx_data = await res.data.arrayBuffer()
let tem_workbook = XLSX.read(xlsx_data, {type:"array"}); // 解析數(shù)據(jù)
workbook.value = tem_workbook
getTable(tem_workbook.SheetNames[0]); // 讀取第一張表數(shù)據(jù)
// 解析xlsx數(shù)據(jù)為table
function getTable(sheetName) {
let worksheet = workbook.value.Sheets[sheetName];
excelData.value = XLSX.utils.sheet_to_json(worksheet);
}
xlsx插件僅僅是幫我們解析excel表的數(shù)據(jù)，并沒有幫我們排版，所以通常我們需要自己寫樣式重新排列數(shù)據(jù)，用element的table組件是個不錯的選擇。
同時為了可以切換多個表，我們還可以將表名數(shù)組作一個遍歷，提供給用戶切換表的功能。
圖片的預覽
圖片的預覽相對而言簡單了許多，不需要利用任何插件，僅僅只需要將圖片文件流轉換為一個可以被查閱的blob地址。
const blobImage = new window.Blob([res.data], { type: 'image/' + fileType }) // fileType指圖片的類型
const imageHref = URL.createObjectURL(blobImage); // 創(chuàng)造一個地址
preloadImg.value = imageHref // img標簽的src屬性的值
結語
以上就是相關一些文件的預覽方式，所利用到的插件并非是單一的選擇，還有其他的解決方案可以達到我們的目的。但是需要切記的事情是大部分插件都需要我們保證文件的完整性，才能夠解析成功，在完成該功能的時候我們需要先關注文件上傳和下載的時候有沒有丟失或者損壞這個前提。
到此這篇關于如何在vue中實現(xiàn)文件預覽功能的文章就介紹到這了,更多相關vue實現(xiàn)文件預覽功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
watch函數(shù)用于偵聽某個值的變化,當該值發(fā)生改變后,觸發(fā)對應的處理邏輯,本文將給大家介紹了Vue3中watch監(jiān)聽的五種情況,文中通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue.js學習筆記之v-bind和v-on解析，v-bind 指令用于響應地更新 HTML 特征，v-on 指令用于監(jiān)聽DOM事件，文中還給大家提到了v-bind,v-on的縮寫，感興趣的朋友參考下吧2018-05-05
vue router-link傳參以及參數(shù)的使用實例
下面小編就為大家?guī)硪黄獀ue router-link傳參以及參數(shù)的使用實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue2.0學習之a(chǎn)xios的封裝與vuex介紹
最近在研究Vuex2.0,搞了好幾天終于有點頭緒了。下面這篇文章主要給大家介紹了關于vue2.0學習之a(chǎn)xios的封裝與vuex的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-05-05
Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-10-10
這篇文章主要介紹了深入理解Vue.js輕量高效的前端組件化方案 ,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了解決Vue項目中tff報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要介紹了vue實現(xiàn)在進行增刪改操作后刷新頁面，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個框架，不像兩個?API，要說細節(jié)上的區(qū)別就太多太多了，本文就簡單的帶大家說說Vue?和?React?的區(qū)別,需要的朋友可以參考下2023-05-05