vue多附件预览（.pdf\.docx\.xlsx\.txt）

<!--* @Author: 赵成刚* @Date: 2022-04-29 11:05:23* @LastEditors: 赵成刚* @LastEditTime: 2022-05-25 16:38:10* @FilePath: \tz-purchase-web\src\components\AttachmentManagement\components\preview.vue* @Description: 预览组件* Copyright (c) ${2022} by ChenYu/天智AgileTeam, All Rights Reserved.
-->
<template><BasicModalv-bind="$attrs"@register="registerModal":title="''":width="900":showOkBtn="false":showCancelBtn="false"destroyOnClose><PageWrapper contentClass="flex"><!-- 文档 --><template v-if="getFileType(preview.fileName) == 2"><div ref="docxfile"></div></template><!-- 表格 --><template v-if="getFileType(preview.fileName) == 3"><div id="xlsxfile" ref="xlsxfile"></div></template><!-- pdf--><template v-if="getFileType(preview.fileName) == 1"><iframe :src="preview.fileurl" width="100%" height="100%" frameborder="0"> </iframe></template><!-- 图片 --><template v-if="getFileType(preview.fileName) == 4"><img :src="preview.fileurl" style="height: 500px; text-align: center" /></template><!-- txt --><template v-if="getFileType(preview.fileName) == 5"><div>{{ txtfile }}</div></template></PageWrapper></BasicModal>
</template><script lang="ts" setup>// 引入axios用来发请求import axios from 'axios';// 引入docx-preview插件import { renderAsync } from 'docx-preview';// 引入xlsx插件import * as XLSX from 'xlsx';import { PageWrapper } from '/@/components/Page';import { reactive, ref } from 'vue';import { BasicModal, useModalInner } from '/@/components/Modal'; //弹窗const [registerModal, { setModalProps }] = useModalInner(async (data) => {preview.fileurl = data.url;preview.fileName = data.fileName;typeDifferentiation(data);setModalProps({ confirmLoading: false });});const docxfile = ref(null);const xlsxfile = ref(null);const txtfile = ref('');const preview = reactive({pageNum: 1,pageTotalNum: 1, // 总页数loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了fileurl: '',fileName: '',});/*** 获取文件类型* @return {null|number}*/function getFileType(val) {let fileName = val.lastIndexOf('.'); //取到文件名开始到最后一个点的长度let fileNameLength = val.length; //取到文件名长度let fileFormat = val.substring(fileName + 1, fileNameLength); //截if (fileFormat.toLowerCase() === 'pdf') {return 1;} else if (fileFormat.toLowerCase() === 'docx' || fileFormat.toLowerCase() === 'doc') {return 2;} else if (fileFormat.toLowerCase() === 'xlsx' || fileFormat.toLowerCase() === 'xls') {return 3;} else if (fileFormat.toLowerCase() === 'png' ||fileFormat.toLowerCase() === 'jpg' ||fileFormat.toLowerCase() === 'jpeg' ||fileFormat.toLowerCase() === 'gif') {return 4;} else if (fileFormat.toLowerCase() === 'txt') {return 5;} else if (fileFormat.toLowerCase() === 'ppt' || fileFormat.toLowerCase() === 'pptx') {return 6;}return null;}//类型区分function typeDifferentiation(data) {if (getFileType(data.fileName) == 2) {axios({method: 'get',responseType: 'blob', // 因为是流文件，所以要指定blob类型url: data.url, // 自己的服务器，提供的一个word下载文件接口}).then(({ data }) => {renderAsync(data, docxfile.value); // 渲染到页面});}if (getFileType(data.fileName) == 3) {axios({url: data.url,method: 'get',responseType: 'arraybuffer',}).then((res) => {var data = new Uint8Array(res.data);var workbook = XLSX.read(data, { type: 'array' });readWorkbook(workbook);});}if (getFileType(data.fileName) == 5) {axios({method: 'get',responseType: 'blob', // 因为是流文件，所以要指定blob类型url: data.url, // 自己的服务器，提供的一个word下载文件接口}).then(({ data }) => {data.text().then((res) => {txtfile.value = res;});});}}//  读取excel文件流-开始-function readWorkbook(workbook) {var sheetNames = workbook.SheetNames; // 工作表名称集合var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheetvar csv = XLSX.utils.sheet_to_csv(worksheet);xlsxfile.value.innerHTML = csv2table(csv);}function csv2table(csv) {var html = "<table   class='table'>";var rows = csv.split('\n');rows.pop(); // 最后一行没用的rows.forEach(function (row, idx) {var columns = row.split(',');columns.unshift(idx + 1); // 添加行索引if (idx === 0) {// 添加列索引html += '<tr bgcolor="#ebeffb">';for (var i = 0; i < columns.length; i++) {html += '<th >' + (i === 0 ? '' : String.fromCharCode(65 + i - 1)) + '</th>';}html += '</tr>';}html += '<tr>';columns.forEach(function (column) {html += '<td>' + column + '</td>';});html += '</tr>';});html += '</table>';return html;}//  读取excel文件流-结束-
</script>

终极解决方案
kkfileview

1.需要后台搭建服务
2.前端vue页面使用
2-1.import { Base64 } from 'js-base64';
2-2. window.open('http://www.sxjbjt.com:19504/bulk-purchase/fileview/onlinePreview?url=' + encodeURIComponent(Base64.encode('文件地址')));

vue多附件预览（.pdf\.docx\.xlsx\.txt）相关推荐

vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
vue预览doc,docx,xlsx,pdf等文件方法
1.用微软的链接:不好用,文件地址得是公网的 var officrUrl = https://view.officeapps.live.com/op/view.aspx?src=文档绝对路径 2.和微 ...
php+预览和下载pdf文件,vue实现在线预览pdf文件和下载（pdf.js）
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...
vue实现打印预览pdf（window.open）
打开接口地址,这个方法是后端已经写好打印window.print(); 前端就只需要打开这个网页地址即可,类型需要是html window.open(res.request.responseURL,& ...
前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件需求:在vue3.x项目中预览pdf文件提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
文章目录 @[TOC](文章目录) 方法一. Luckysheet 预览方法二. Office Web 查看器(微软的开发接口) 方法三. XDOC文档预览云服务(预览pdf.word.xls.pp ...
PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...

vue多附件预览（.pdf\.docx\.xlsx\.txt）

vue多附件预览（.pdf\.docx\.xlsx\.txt）相关推荐

最新文章

热门文章