vue3 文件流预览常见文件(xls,xlsx,ptf,txt,img,excel)

原创已于 2024-08-30 10:41:50 修改 · 4.7k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#excel #vue.js #javascript

于 2024-06-11 09:37:58 首次发布

一、图片预览

<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()方法冲突