vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)(pdf/word/excel表格)
更新時間：2022年05月24日 10:17:52 作者：無月大大
最近在項目中要做一個pdf在線預(yù)覽的功能,索性給大家整理個全面的,這篇文章主要給大家介紹了關(guān)于vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下
前言
之前做PDF預(yù)覽一直用的pdf.js，這次沒有太多附加需求比較簡單簡，所以決定用vue-pdf這個組件，雖然說它沒有原生那樣強大，但已經(jīng)滿足常用的需求了，重要是這個組件使用簡單。順便也把word文件和excel表格預(yù)覽也整理了下，接下來我們直接進入正題！
一、預(yù)覽word文件
1.安裝 npm 依賴
npm i docx-preview@0.1.4 npm i jszip
2.預(yù)覽在線地址文件
<template>
<div class="home">
<div ref="file"></div>
</div>
</template>
<script>
import axios from 'axios'
const docx = require('docx-preview');
window.JSZip = require('jszip')
export default {
mounted(){
axios({
method: 'get',
responseType: 'blob', // 設(shè)置響應(yīng)文件格式
url: '/docx',
}).then(({data}) => {
docx.renderAsync(data,this.$refs.file) // 渲染到頁面預(yù)覽
})
}
}
</script>
3.預(yù)覽本地文件
<template>
<div class="my-component" ref="preview">
<input type="file" @change="preview" ref="file">
</div>
</template>
<script>
const docx = require('docx-preview');
window.JSZip = require('jszip')
export default {
methods:{
preview(e){
docx.renderAsync(this.$refs.file.files[0],this.$refs.preview) // 渲染到頁面預(yù)覽
}
}
};
</script>
<style lang="less" scoped>
.my-component{
width: 100%;
height: 90vh;
border: 1px solid #000;
}
</style>
二、預(yù)覽excel表格
1.安裝依賴
npm i xlsx
2.預(yù)覽在線表格
<template>
<div class="home">
<div v-html="tableau"></div>
</div>
</template>
<script>
import axios from 'axios'
import XLSX from "xlsx";
export default {
data(){
return {
tableau: null,
}
},
mounted(){
axios.get('/xlsx',{
responseType: "arraybuffer", // 設(shè)置響應(yīng)體類型為arraybuffer
}).then(({data})=> {
let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析數(shù)據(jù)
var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是該文件每個工作表名字,這里取出第一個工作表
this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
})
}
}
</script>
三、pdf預(yù)覽
1.安裝依賴vue-pdf
npm install --save vue-pdf
2.在需要的頁面注冊
<script>
import PDF from 'vue-pdf'
export default {
components:{
PDF,
},
data(){
return {
}
}
</script>
3.使用
一般預(yù)覽pdf時都是很多頁的，為了提升性能可以做個分頁。page: 當前顯示的頁數(shù)，比如第一頁page=1；rotate ： 旋轉(zhuǎn)角度，比如0就是不旋轉(zhuǎn)，+90，-90 就是水平旋轉(zhuǎn)。progress ：當前頁面的加載進度，范圍是0-1 ，等于1的時候代表當前頁已經(jīng)完全加載完成了。page-loaded ：頁面加載成功的回調(diào)函數(shù)，不咋能用到。num-pages ：總頁數(shù)；error ：加載錯誤的回調(diào)link-clicked：單機pdf內(nèi)的鏈接會觸發(fā)。print 這個是打印函數(shù)。（注意：谷歌瀏覽器預(yù)覽時會出現(xiàn)亂碼，這個問題是因為你pdf中使用了自定義字體導(dǎo)致的。若要解決須替換node_modules/vue-pdf/src/pdfjsWrapper.js，替換的pdfjsWrapper.js我放在文章最后）
<!-- 預(yù)覽PDF -->
<el-dialog v-dialogDrag :visible.sync="previewDialog">
<template>
<div>
<div class="tools">
<el-button :theme="'default'" type="submit" :title="'上一頁'" @click.stop="prePage" class="mr10"> 上一頁</el-button>
<el-button :theme="'default'" type="submit" :title="'下一頁'" @click.stop="nextPage" class="mr10"> 下一頁</el-button>
<div class="page">{{pageNum}}/{{pageTotalNum}} </div>
<el-button :theme="'default'" type="submit" :title="'順時針旋轉(zhuǎn)'" @click.stop="clock" class="mr10"> 順時針旋轉(zhuǎn)</el-button>
<el-button :theme="'default'" type="submit" :title="'逆時針旋轉(zhuǎn)'" @click.stop="counterClock" class="mr10"> 逆時針旋轉(zhuǎn)</el-button>
<el-button :theme="'default'" type="submit" :title="'打印'" @click.stop="pdfPrintAll" class="mr10"> 打印</el-button>
</div>
<pdf ref="pdf" :src="url" :page="pageNum" :rotate="pageRotate" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event"></pdf>
</div>
</template>
</el-dialog>
<script>
import PDF from 'vue-pdf'
export default {
components:{
PDF,
},
data(){
return {
previewDialog:false,
url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
pageNum: 1,
pageTotalNum: 1,
pageRotate: 0,
// 加載進度
loadedRatio: 0,
curPageNum: 0,
},
methods:{
/**
* 預(yù)覽PDF
*/
previewPDF(row,index) {
this.previewDialog = true;
console.log("", row,index);
},
// 上一頁函數(shù)，
prePage() {
var page = this.pageNum
page = page > 1 ? page - 1 : this.pageTotalNum
this.pageNum = page
},
// 下一頁函數(shù)
nextPage() {
var page = this.pageNum
page = page < this.pageTotalNum ? page + 1 : 1
this.pageNum = page
},
// 頁面順時針翻轉(zhuǎn)90度。
clock() {
this.pageRotate += 90
},
// 頁面逆時針翻轉(zhuǎn)90度。
counterClock() {
this.pageRotate -= 90
},
// 頁面加載回調(diào)函數(shù)，其中e為當前頁數(shù)
pageLoaded(e) {
this.curPageNum = e
},
// 錯誤時回調(diào)函數(shù)。
pdfError(error) {
console.error(error)
},
// 打印全部
pdfPrintAll() {
/**
* 打印界面字符亂碼是因為你pdf中使用了自定義字體導(dǎo)致的,谷歌瀏覽器打印的時候預(yù)覽界面真的變成了真·方塊字 ,解決方案如下：
* 用文章最后的pdfjsWrapper.js在替換掉node_modules/vue-pdf/src/pdfjsWrapper.js
*/
console.log("打印");
this.$refs.pdf.print()
},
},
}
</script>
4.加載本地pdf文件
如果需要加載本地pdf文件（不需要則不用配置），需要我們做一下本地配置flie-loader才行，否則webpack無法編譯pdf類型的文件，配置方法也很簡單，在項目根目錄找到vue.config.js文件（若沒有則在根目錄下新建一個vue.config.js）。之后再url:require("…/assets/xxx.pdf")就沒有任何問題了，注意，vue-pdf src接收的是string對象，如果直接傳url這里報錯了，需要傳url.default一下。
先安裝file-loader
npm install --save file-loader
然后在vue.config.js中加入以下內(nèi)容：
module.exports = {
chainWebpack: config => {
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.pdf|ico$/)
.use('file-loader')
.loader('file-loader')
.options({
limit: 10000,
})
},
publicPath: './'
}
5.解決pdf使用自定義字體預(yù)覽和打印亂碼問題：pdfjsWrapper.js
import { PDFLinkService } from 'pdfjs-dist/es5/web/pdf_viewer';
var pendingOperation = Promise.resolve();
export default function(PDFJS) {
function isPDFDocumentLoadingTask(obj) {
return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
// or: return obj.constructor.name === 'PDFDocumentLoadingTask';
}
function createLoadingTask(src, options) {
var source;
if ( typeof(src) === 'string' )
source = { url: src };
else if ( src instanceof Uint8Array )
source = { data: src };
else if ( typeof(src) === 'object' && src !== null )
source = Object.assign({}, src);
else
throw new TypeError('invalid src type');
// source.verbosity = PDFJS.VerbosityLevel.INFOS;
// source.pdfBug = true;
// source.stopAtErrors = true;
if ( options && options.withCredentials )
source.withCredentials = options.withCredentials;
var loadingTask = PDFJS.getDocument(source);
loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public
if ( options && options.onPassword )
loadingTask.onPassword = options.onPassword;
if ( options && options.onProgress )
loadingTask.onProgress = options.onProgress;
return loadingTask;
}
function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {
var pdfDoc = null;
var pdfPage = null;
var pdfRender = null;
var canceling = false;
canvasElt.getContext('2d').save();
function clearCanvas() {
canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);
}
function clearAnnotations() {
while ( annotationLayerElt.firstChild )
annotationLayerElt.removeChild(annotationLayerElt.firstChild);
}
this.destroy = function() {
if ( pdfDoc === null )
return;
// Aborts all network requests and destroys worker.
pendingOperation = pdfDoc.destroy();
pdfDoc = null;
}
this.getResolutionScale = function() {
return canvasElt.offsetWidth / canvasElt.width;
}
this.printPage = function(dpi, pageNumberOnly) {
if ( pdfPage === null )
return;
// 1in == 72pt
// 1in == 96px
var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;
var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
var CSS_UNITS = 96.0 / 72.0;
var printContainerElement = document.createElement('div');
printContainerElement.setAttribute('id', 'print-container')
function removePrintContainer() {
printContainerElement.parentNode.removeChild(printContainerElement);
}
new Promise(function(resolve, reject) {
printContainerElement.frameBorder = '0';
printContainerElement.scrolling = 'no';
printContainerElement.width = '0px;'
printContainerElement.height = '0px;'
printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0';
window.document.body.appendChild(printContainerElement);
resolve(window)
})
.then(function(win) {
win.document.title = '';
return pdfDoc.getPage(1)
.then(function(page) {
var viewport = page.getViewport({ scale: 1 });
printContainerElement.appendChild(win.document.createElement('style')).textContent =
'@supports ((size:A4) and (size:1pt 1pt)) {' +
'@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
'}' +
'#print-canvas { display: none }' +
'@media print {' +
'body { margin: 0 }' +
'#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
'body > *:not(#print-container) { display: none; }' +
'}'+
'@media screen {' +
'body { margin: 0 }' +
'}'
return win;
})
})
.then(function(win) {
var allPages = [];
for ( var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber ) {
if ( pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1 )
continue;
allPages.push(
pdfDoc.getPage(pageNumber)
.then(function(page) {
var viewport = page.getViewport({ scale: 1 });
var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas'));
printCanvasElt.setAttribute('id', 'print-canvas')
printCanvasElt.width = (viewport.width * PRINT_UNITS);
printCanvasElt.height = (viewport.height * PRINT_UNITS);
return page.render({
canvasContext: printCanvasElt.getContext('2d'),
transform: [ // Additional transform, applied just before viewport transform.
PRINT_UNITS, 0, 0,
PRINT_UNITS, 0, 0
],
viewport: viewport,
intent: 'print'
}).promise;
})
);
}
Promise.all(allPages)
.then(function() {
win.focus(); // Required for IE
if (win.document.queryCommandSupported('print')) {
win.document.execCommand('print', false, null);
} else {
win.print();
}
removePrintContainer();
})
.catch(function(err) {
removePrintContainer();
emitEvent('error', err);
})
})
}
this.renderPage = function(rotate) {
if ( pdfRender !== null ) {
if ( canceling )
return;
canceling = true;
pdfRender.cancel().catch(function(err) {
emitEvent('error', err);
});
return;
}
if ( pdfPage === null )
return;
var pageRotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);
var scale = canvasElt.offsetWidth / pdfPage.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1);
var viewport = pdfPage.getViewport({ scale: scale, rotation:pageRotate });
emitEvent('page-size', viewport.width, viewport.height, scale);
canvasElt.width = viewport.width;
canvasElt.height = viewport.height;
pdfRender = pdfPage.render({
canvasContext: canvasElt.getContext('2d'),
viewport: viewport
});
annotationLayerElt.style.visibility = 'hidden';
clearAnnotations();
var viewer = {
scrollPageIntoView: function(params) {
emitEvent('link-clicked', params.pageNumber)
},
};
var linkService = new PDFLinkService();
linkService.setDocument(pdfDoc);
linkService.setViewer(viewer);
pendingOperation = pendingOperation.then(function() {
var getAnnotationsOperation =
pdfPage.getAnnotations({ intent: 'display' })
.then(function(annotations) {
PDFJS.AnnotationLayer.render({
viewport: viewport.clone({ dontFlip: true }),
div: annotationLayerElt,
annotations: annotations,
page: pdfPage,
linkService: linkService,
renderInteractiveForms: false
});
});
var pdfRenderOperation =
pdfRender.promise
.then(function() {
annotationLayerElt.style.visibility = '';
canceling = false;
pdfRender = null;
})
.catch(function(err) {
pdfRender = null;
if ( err instanceof PDFJS.RenderingCancelledException ) {
canceling = false;
this.renderPage(rotate);
return;
}
emitEvent('error', err);
}.bind(this))
return Promise.all([getAnnotationsOperation, pdfRenderOperation]);
}.bind(this));
}
this.forEachPage = function(pageCallback) {
var numPages = pdfDoc.numPages;
(function next(pageNum) {
pdfDoc.getPage(pageNum)
.then(pageCallback)
.then(function() {
if ( ++pageNum <= numPages )
next(pageNum);
})
})(1);
}
this.loadPage = function(pageNumber, rotate) {
pdfPage = null;
if ( pdfDoc === null )
return;
pendingOperation = pendingOperation.then(function() {
return pdfDoc.getPage(pageNumber);
})
.then(function(page) {
pdfPage = page;
this.renderPage(rotate);
emitEvent('page-loaded', page.pageNumber);
}.bind(this))
.catch(function(err) {
clearCanvas();
clearAnnotations();
emitEvent('error', err);
});
}
this.loadDocument = function(src) {
pdfDoc = null;
pdfPage = null;
emitEvent('num-pages', undefined);
if ( !src ) {
canvasElt.removeAttribute('width');
canvasElt.removeAttribute('height');
clearAnnotations();
return;
}
// wait for pending operation ends
pendingOperation = pendingOperation.then(function() {
var loadingTask;
if ( isPDFDocumentLoadingTask(src) ) {
if ( src.destroyed ) {
emitEvent('error', new Error('loadingTask has been destroyed'));
return
}
loadingTask = src;
} else {
loadingTask = createLoadingTask(src, {
onPassword: function(updatePassword, reason) {
var reasonStr;
switch (reason) {
case PDFJS.PasswordResponses.NEED_PASSWORD:
reasonStr = 'NEED_PASSWORD';
break;
case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
reasonStr = 'INCORRECT_PASSWORD';
break;
}
emitEvent('password', updatePassword, reasonStr);
},
onProgress: function(status) {
var ratio = status.loaded / status.total;
emitEvent('progress', Math.min(ratio, 1));
}
});
}
return loadingTask.promise;
})
.then(function(pdf) {
pdfDoc = pdf;
emitEvent('num-pages', pdf.numPages);
emitEvent('loaded');
})
.catch(function(err) {
clearCanvas();
clearAnnotations();
emitEvent('error', err);
})
}
annotationLayerElt.style.transformOrigin = '0 0';
}
return {
createLoadingTask: createLoadingTask,
PDFJSWrapper: PDFJSWrapper,
}
}總結(jié)
到此這篇關(guān)于vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)的文章就介紹到這了,更多相關(guān)vue文件在線預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
- vue項目預(yù)覽excel表格功能(file-viewer插件)
- vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
- Vue3實現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
- 使用SpringBoot+EasyExcel+Vue實現(xiàn)excel表格的導(dǎo)入和導(dǎo)出詳解
- vue使用axios導(dǎo)出后臺返回的文件流為excel表格詳解
- vue中el-table前端如何導(dǎo)出excel數(shù)據(jù)表格
相關(guān)文章
原生JS?Intersection?Observer?API實現(xiàn)懶加載
這篇文章主要為大家介紹了原生JS?Intersection?Observer?API實現(xiàn)懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了VUE中的filters過濾器使用方法，文章主要通過描述全局過濾器、全局過濾器之單一掛載、全局過濾器之批量掛載?、組件過濾器展開內(nèi)容，具有一定的參考價值組要的小伙伴可以參考一下2022-03-03
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了關(guān)于Vue背景圖打包之后訪問路徑錯誤問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了詳解Vue自定義hook函數(shù)，hook函數(shù)本質(zhì)是一個函數(shù)，把setup函數(shù)中使用的Composition?API進行了封裝，更多相關(guān)內(nèi)容感興趣的朋友可以參考一下2022-06-06
詳解element-ui表格的合并行和列(非常細節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
Vue3中使用mock.js模擬數(shù)據(jù)的示例詳解
前后端同時開發(fā)的時候,后端接口數(shù)據(jù)沒有出來,前端可以使用mock模擬假數(shù)據(jù),所以下面小編就來為大家詳細介紹一下如何在Vue3中使用mock.js模擬數(shù)據(jù)吧2025-03-03
這篇文章主要介紹了Vue.component的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
在Vue中使用Bootstrap是常見的前端開發(fā)實踐之一,結(jié)合了Vue的響應(yīng)式數(shù)據(jù)綁定與Bootstrap的UI組件和布局系統(tǒng),能夠快速實現(xiàn)現(xiàn)代化的網(wǎng)頁應(yīng)用,本文將詳細介紹如何在Vue中使用Bootstrap,從安裝到高級使用,涵蓋了各種常見的開發(fā)場景和技巧,需要的朋友可以參考下2024-12-12