一、图片预览
<el-image-viewer v-if="previewLists.length" :url-list="dialogImageUrl" hide-on-click-modal @close="handleClose" />
if (['jpeg', 'png', 'jpg', 'gif', 'bmp', 'tif'].includes(file.ext)) {
dialogImageUrl.value = window.URL.createObjectURL(new Blob(binaryData));
dialogVisible.value = true;
}
二、txt文件预览
<iframe v-show="['txt'].includes(ext)" :src="dialogImageUrl" frameborder="0" width="100%" height="100%"></iframe>
if (['txt'].includes(file.ext)) {
dialogImageUrl.value = URL.createObjectURL(new Blob(binaryData));
// dialogVisiblePreview.value = true;
}
三、快捷预览使用@vue-office(仅支持docx、.xlsx、pdf)
插件地址:vue-office简介 | vue-office
#docx文档预览组件
npm install @vue-office/docx vue-demi
#excel文档预览组件
npm install @vue-office/excel vue-demi
#pdf文档预览组件
npm install @vue-office/pdf vue-demi
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
npm install @vue/composition-api
使用代码:
<el-dialog v-model="dialogVisiblePreview" append-to-body style="width: 60%; height: 90%" :title="fileName">
<div style="height: 80vh; width: 100%">
<vue-office-excel style="height: 100%; width: 100%" v-if="['xlsx'].includes(ext)" :src="dialogImageUrl" />
<vue-office-pdf style="height: 100%; width: 100%" v-show="['pdf'].includes(ext)" :src="dialogImageUrl" />
<vue-office-docx style="height: 100%; width: 100%" v-show="['docx'].includes(ext)" :src="dialogImageUrl" />
</div>
</el-dialog>
<script lang="ts" setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
const handleView = (file: CommonFileListType) => {
// const imageExtensions = /\.(png|jpg|jpeg|gif|bmp|tif)$/i;
fileName.value = file.original || file.storageName;
ext.value = file.ext;
//如果是图片可以预览
// if (imageExtensions.test(name)) {
getFiles(file.fileId as string).then((response: any) => {
// eslint-disable-next-line no-console
console.log(response, file, window.URL.createObjectURL(new Blob(binaryData)), '返回值');
var binaryData = [] as any;
binaryData.push(response);
if (['xls', 'xlsx', 'docx', 'pdf', 'txt', 'pptx'].includes(file.ext)) dialogVisiblePreview.value = true;
if (['jpeg', 'png', 'jpg', 'gif', 'bmp', 'tif'].includes(file.ext)) {
dialogImageUrl.value = window.URL.createObjectURL(new Blob(binaryData));
dialogVisible.value = true;
} else if (['xls', 'xlsx'].includes(file.ext)) {
let reader = new FileReader();
reader.readAsArrayBuffer(response);
reader.onload = (loadEvent: any) => {
let arrayBuffer = loadEvent.target.result;
dialogImageUrl.value = arrayBuffer;
};
dialogVisiblePreview.value = true;
} else if (['docx'].includes(file.ext)) {
let reader = new FileReader();
reader.readAsArrayBuffer(response);
reader.onload = (loadEvent: any) => {
let arrayBuffer = loadEvent.target.result;
dialogImageUrl.value = arrayBuffer;
};
// dialogVisiblePreview.value = true;
} else if (['pdf'].includes(file.ext)) {
let reader = new FileReader();
reader.readAsArrayBuffer(response);
reader.onload = (loadEvent: any) => {
let arrayBuffer = loadEvent.target.result;
dialogImageUrl.value = arrayBuffer;
};
dialogVisiblePreview.value = true;
} else if (['txt'].includes(file.ext)) {
dialogImageUrl.value = URL.createObjectURL(new Blob(binaryData));
}
loading.value = false;
});
};
</script>
四、使用xlsx预览(支持.xls、.xlsx)
npm i xlsx
// xls&&xlsx 预览
import XLSX from 'xlsx';
if (['xls', 'xlsx'].includes(file.ext)) {
const reader = new FileReader();
reader.onload = (e: any) => {
XLSXtableData.value = [];
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// 获取第一个工作表
const sheetNameArr = workbook.SheetNames;
sheetName.value = sheetNameArr;
sheetNameArr.forEach((sheetName) => {
XLSXtableData.value.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { header: 1 }),
});
});
renderData.value = XLSXtableData.value[0].sheet;
};
reader.readAsArrayBuffer(response);
}
五、pdf预览(建议使用支持功能多)
<iframe v-show="['pdf'].includes(ext)" :src="dialogImageUrl" frameborder="0" width="100%" height="100%"></iframe>
if (['pdf'].includes(file.ext)) {
dialogImageUrl.value = URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
}
效果图:
六、PPT格式
PPT官网:https://pptx.js.org/pages/demo3.html
将代码下载到本地引入项目中 下载代码地址:https://gitcode.com/meshesha/PPTXjs/overview?utm_source=csdn_github_accelerator&isLogin=1
引入你下载的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite</title>
<link rel="stylesheet" href="/lib/css/pptxjs.css" />
<link rel="stylesheet" href="/lib/css/nv.d3.min.css" />
<script type="text/javascript" src="/lib/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/lib/js/jszip.min.js"></script>
<script type="text/javascript" src="/lib/js/filereader.js"></script>
<script type="text/javascript" src="/lib/js/d3.min.js"></script>
<script type="text/javascript" src="/lib/js/nv.d3.min.js"></script>
<script type="text/javascript" src="/lib/js/pptxjs.js"></script>
<script type="text/javascript" src="/lib/js/divs2slides.js"></script>
<script type="text/javascript" src="/lib/js/jquery.fullscreen-min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
<div ref="pptxDom" id="pptxDom" style="height: 100%; width: 100%" v-show="['pptx'].includes(ext)"></div>
if (['pptx'].includes(file.ext)) {
nextTick(() => {
$('#pptxDom').pptxToHtml({
pptxFileUrl: URL.createObjectURL(new Blob(binaryData)), //pptx文件地址
slidesScale: '100%',
});
});
}
PPT格式转换可能会跟vue的 Object.defineProperty()方法冲突