vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,

**

方法1:word、xls、ppt、pdf 这些文件, 如果预览的文件是链接可以直接打开,可用微软官方的预览地址

**

 <iframe width="100%" :src="textVisibleURl " id="myFramePPT" style="border: none;background: #f3f5f8"title="预览" height="100%"></iframe>
data(){return {textVisibleURl :''}
}//可用window.open新开页面 或者 iframe 嵌入
//src是你文件的链接,需要可以公网访问,内网不可用,如http://********.docxthis.textVisibleURl = `https://view.officeapps.live.com/op/embed.aspx?src=${src}`; //去掉头部一些不必要的按钮操作
window.open(this.textVisibleURl)

方法2:word、xls、ppt、pdf 这些文件, 如果预览的文件是类型是文件流或者base64格式

本次我的项目中后端返回的是base64格式,在预览中需要将base64格式转为文件流
在这里插入图片描述

methods:{
getCustomerPoolList() {this.$api.getCustomerPoolList({ cityName: this.cityName.toString(), homeId: this.homeInterViewSelected.map(item => 			 item.homeId).toString() }).then(res => {res.data.forEach(item => {//此处两个遍历和预览无关,为业务逻辑,主要区分出文档和图片item.mapImageObj = item.fileList.filter(file => {return file.fileType == '.png' || file.fileType == '.jpg' || file.fileType == '.jpeg'})[0] || {}item.annexFileList = item.fileList.filter(file => {return file.fileType !== '.png' && file.fileType !== '.jpg' && file.fileType !== '.jpeg'}) || {}//item.annexFileList为所有文档的数组item.annexFileList.forEach((i, index) => {//fileByte为base64格式,如上图,如果你的文件格式直接为文件流,此处 base64Str 到 byteArray 可跳过let base64Str = i.fileByte;const byteCharacters = atob(base64Str);const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);//针对不同的文件添加不同的BlobType,此处转为文件流URL,文件为文件流可直接从此处开始//fileType 可以从fileName中截取,也可让后端返回if (i.fileType == '.pdf') {const blob = new Blob([byteArray], { type: 'application/pdf' });i.dialogImageUrl = URL.createObjectURL(blob);} else if (i.fileType == '.docx') {const blob = new Blob([byteArray], { type: 'application/msword' });i.dialogImageUrl = URL.createObjectURL(blob);} else if (i.fileType == '.ppt' || i.fileType == '.pptx') {const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });i.dialogImageUrl = URL.createObjectURL(blob);} else {//此处为excel文件,格式为".xlsx"const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });i.dialogImageUrl = URL.createObjectURL(blob);return}})})this.customerPoolObj = JSON.parse(JSON.stringify(res.data))})},
}

处理完后的数据,dialogImageUrl 为对象URL,预览全靠这个URL!!!
在这里插入图片描述
开始页面渲染

文件列表展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1e0494fa39264352982a21793adb8597.png

预览所需的插件

#docx文档预览组件方法1
npm install @vue-office/docx vue-demi#docx文档预览组件方法2,本文没有使用此插件预览docx
npm install mammoth#excel文档预览组件
npm install @vue-office/excel vue-demi#pdf文档预览组件 ,本文中没有使用此插件预览PDF 
npm install @vue-office/pdf vue-demi

将两个文件复制到public目录下
在这里插入图片描述
在这里插入图片描述

ppt iframe的index.html代码,可适配移动端,pc端可删除适配移动端代码
下面的fileUrl:就是 上面处理完后的 dialogImageUrl

图片中的代码如下

	let currentUrl = window.location.href;function getUrlParams(url) {const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;const params = {};let match;while ((match = paramsRegex.exec(url))) {params[match[1]] = match[2];}return params;}let fileUrl = getUrlParams(currentUrl).fileUrl;console.log("fileUrl-->", fileUrl);//fileUrl:就是dialogImageUrl // #pptx div的id$("#pptx").pptxToHtml({pptxFileUrl: fileUrl,pptxFileName: "fileName",slidesScale: "100%",slideMode: false,keyBoardShortCut: false,});// 适配移动端!!let timer = setInterval(() => {const $slides = $(".slides");if ($slides.children().length) {const slidesWidth = Math.max(...Array.from($slides.children()).map((s) => s.offsetWidth));const $wrapper = $("#pptx");const wrapperWidth = window.innerWidth;const wrapperHeight = window.innerHeight - 55;$wrapper.css({transform: `scale(${wrapperWidth / slidesWidth})`,"transform-origin": "top left",height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",});clearInterval(timer);}}, 100);

ppt/index.html中获取vue页面传进来的src链接获取到

	  <div class="pdfBox1" v-show="fileObj.show"><div class="_head"><h5>{{ fileObj.fileName }}</h5><i @click="closeLook" class="el-icon-arrow-left"></i></div><div class="word-wrap"><!-- 预览pdf --><iframe :src="'./pdf/web/viewer.html?file=' + fileObj.url" height="100%" width="100%" id="iframe" title="预览"v-show="fileObj.type === '.pdf'" /><!-- 预览excel --><vue-office-excel v-if="fileObj.type === '.xlsx'" :src="fileObj.url" @rendered="rendered"style="width: 100%; height: 100%" /><!-- 无适配图片,预览Docx  --><VueOfficeDocx :src="fileObj.url" v-if="fileObj.type === '.docx'"></VueOfficeDocx><!-- 预览ppt  --><iframe width="100%" :src="pptSrc" id="myFramePPT" v-if="fileObj.type === '.pptx' || fileObj.type === '.ppt'"style="border: none;background: #f3f5f8" title="预览" height="100%"></iframe></div></div>

文件列表的点击事件调用toFileBlob

<script>import VueOfficePdf from "@vue-office/pdf";import VueOfficeDocx from '@vue-office/docx'import VueOfficeExcel from "@vue-office/excel";import "@vue-office/docx/lib/index.css";import "@vue-office/excel/lib/index.css";export default {//val为文件列表的对象,主要参数为data(){return{fileObj: {dialogImageUrl:'',fileByte:'',fileName:'',fileType:'',url :'',},pptSrc :''}}toFileBlob(val) {console.log('aaa', val)this.fileObj.show = true;this.fileObj.fileName = val.fileName;this.fileObj.type = val.fileTypethis.fileObj.fileByte = val.fileBytethis.fileObj.url = val.dialogImageUrlif (val.fileType === '.ppt' || val.fileType === '.pptx') {//传入到iframe中this.pptSrc = `/ppt/index.html?fileUrl=${val.dialogImageUrl}`;}else if (val.fileType === '.docx') {//预览word的第二种方法// let base64Str = val.fileByte;// const byteCharacters = atob(base64Str);// const byteNumbers = new Array(byteCharacters.length);// for (let i = 0; i < byteCharacters.length; i++) {//     byteNumbers[i] = byteCharacters.charCodeAt(i);// }/*  mammoth.convertToHtml({arrayBuffer: new Uint8Array(byteNumbers)}).then((resultObject) => {this.$nextTick(() => {this.wordText = resultObject.value;});}); */}}     </script> 

下载base64类型和文件流文件

  downloadGO(data, reportName) {if (!data) {return}let base64Str = data;const byteCharacters = atob(base64Str);const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);//文件流省略上述步骤,直接下述开始,byteArray为文件流let url = window.URL.createObjectURL(new Blob([byteArray]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.download = reportName //文件名document.body.appendChild(link)link.click()},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/64705.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python elasticsearch_dsl PIT Point in time API 查询

默认情况下&#xff0c;搜索请求针对目标索引的最新可见数据&#xff08;称为时间点&#xff09;执行。elasticsearchpit&#xff08;时间点&#xff09;是一种轻量级视图&#xff0c;可以查看数据在启动时的状态。在某些情况下&#xff0c;最好使用同一时间点执行多个搜索请求…

OB删除1.5亿数据耗费2小时

目录 回顾&#xff1a;mysql是怎么删除数据的&#xff1f; 删除方案 代码实现 执行结果 结论 本篇是实际操作 批量处理数据以及线程池线程数设置 记录学习 背景&#xff1a;有一张用户标签表&#xff0c;存储数据量达4个亿&#xff0c;使用OceanBase存储&#xff0c;由于…

【2025最新计算机毕业设计】基于SSM框架的宠物领养系统【提供源码+答辩PPT+文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

【专题】2024抖音电商母婴行业分析报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p38651 在数字化浪潮的席卷下&#xff0c;抖音电商母婴行业正经历着深刻变革。当下&#xff0c;年轻一代父母崛起&#xff0c;特别是 24 至 30 岁以及 18 至 23 岁的群体成为抖音母婴行业兴趣人群的主力军。他们带来全新育儿理念&…

免费开源!推荐一款网页版数据库管理工具!

免费开源&#xff01;推荐一款网页版数据库管理工具&#xff01; DBGate 是一个开源的数据库管理工具&#xff0c;DBGate 的最大特点是可以 Web 访问&#xff01;&#xff0c;轻松实现一台机器部署&#xff0c;所有人使用&#xff01; 无论是 MySQL、PostgreSQL、SQLite 还是…

使用 UniApp 在微信小程序中实现 SSE 流式响应

概述 服务端发送事件(Server-Sent Events, SSE)是一种允许服务器向客户端推送实时更新的技术。SSE 提供了一种单向的通信通道,服务器可以持续地向客户端发送数据,而不需要客户端频繁发起请求。这对于需要实时更新的应用场景非常有用。 流式传输的特点是将数据逐步传输给客…

【Java项目】基于SpringBoot的【旅游管理系统 】

【Java项目】基于SpringBoot的【旅游管理系统 】 技术简介&#xff1a;本系统使用JAVA语言开发&#xff0c;采用B/S架构、Spring Boot框架、MYSQL数据库进行开发设计。 系统简介&#xff1a;&#xff08;1&#xff09;管理员功能&#xff1a;可以管理个人中心、用户管理、景区分…

音频接口:PDM TDM128 TDM256

一、 PDM接口 在麦克风&#xff08;Mic&#xff09;接口中&#xff0c;PDM&#xff08;Pulse Density Modulation&#xff0c;脉冲密度调制&#xff09;和I2S&#xff08;Inter-IC Sound&#xff0c;集成电路内置音频总线&#xff09;是两种常见的数字输出接口。 1、工作原理…

【系统】Windows11更新解决办法,一键暂停

最近的windows更新整的我是措不及防&#xff0c;干啥都要关注一下更新的问题&#xff0c;有的时候还关不掉&#xff0c;我的强迫症就来了&#xff0c;非得关了你不可&#xff01; 经过了九九八十一难的研究之后&#xff0c;终于找到了一个算是比较靠谱的暂停更新的方法&#x…

Canoe E2E校验自定义Checksum算法

文章目录 一、添加 DBC文件二、导入要仿真的ECU节点三、编写 CAPL脚本1. 创建 .can 文件2. 设置counter递增3. 设置 CRC 算法&#xff0c;以profile01 8-bit SAE J1850 CRC校验为例 四、开始仿真五、运行结果CRC在线校验 当E2E的 CRC算法非常规算法&#xff0c;则需要自己编写代…

穷举vs暴搜vs深搜vs回溯vs剪枝系列一>找出所有子集的异或总和再求和

题目&#xff1a; 解析&#xff1a; 代码&#xff1a; private int ret;//返回周结果private int path;//枚举一个元素就异或进去public int subsetXORSum(int[] nums) {dfs(nums, 0);return ret;} private void dfs(int[] nums, int pos){ret path;for(int i pos; i <…

洛谷【贪心算法】P1803 学习笔记

2024-12-20 - 第 41 篇 洛谷贪心算法题单 - 贪心算法 - 学习笔记 作者(Author): 郑龙浩 / 仟濹(CSND账号名) P1803 凌乱的yyy / 线段覆盖 题目背景 快 noip 了&#xff0c;yyy 很紧张&#xff01; 题目描述 现在各大 oj 上有 n n n 个比赛&#xff0c;每个比赛的开始、结…

python使用Flask框架创建一个简单的动态日历

0. 运行效果 运行代码&#xff0c;然后在浏览器中访问 http://127.0.0.1:5000/&#xff0c;将看到一个动态日历&#xff0c;能够通过点击按钮切换月份。 1. 安装 Flask 首先&#xff0c;确保你已经安装了Flask。如果没有&#xff0c;可以使用以下命令安装&#xff1a; pip i…

Python字典使用练习-----实现查找电话号

不记得字典语法知识的可以翻我主页^V^ 【要求】 定义一个电话簿&#xff0c;字典里头设置以下联系人&#xff1a; mayun:13309283335, zhaolong:18989227822, zhangmin:13382398921, Gorge:19833824743, Jordan:18807317878, Curry:15093488129, Wade:19282937665 现在输入…

windows openssl编译x64版libssl.lib,编译x64版本libcurl.lib,支持https,vs2015编译器

不要纠结&#xff0c;直接选择用perl编译&#xff01; 告诫想要用弄成vs编译版的&#xff0c;暂时先别给自己增加麻烦 告诫&#xff0c;以下执行的每一步&#xff0c;都不要纠结 先安装环境 nasm 64位版本 https://www.nasm.us/pub/nasm/releasebuilds/2.16.01/win64/nasm-…

dev类似于excel的数据编辑

其实这个不是我最后的结果&#xff0c;只是中间demo&#xff0c;因为我的场景数据量很大&#xff0c;2w左右&#xff0c;有数据合并&#xff0c;我更倾向于el-table是实现&#xff0c;但不想el-input一直显示&#xff0c;想用if-else 去做隐藏&#xff0c;但是用typetextarea发…

uniapp对接unipush 1.0 ios/android

简介 实现方法 是uniapp官网推荐的 unipush-v1 文档配置具体看 uni-app官网 配置好了之后 代码实现 前端代码 前端的主要任务是监听 监听到title content 创建消息推送 安卓 可以收到在线消息并且自动弹出消息 IOS 可以监听到在线消息但是需要手动推送 以下代码app初始…

【WRF-Urban】输入空间分布人为热排放数据的WRF运行全过程总结

目录 数据准备检查新增变量配置(如果有)WPS预处理修改namelist.wpsStep1: geogridStep2: ungribStep3: metgridWRF运行修改namelist.input调试namelist.input运行./real.exe运行./wrf.exe参考WRF模型的基本流程如下: 数据准备 空间分布热排放数据下载及制备可参见另一博客…

JavaSE——绘图入门

一、Java绘图坐标体系 下图说明了Java坐标系&#xff0c;坐标原地位于左上角&#xff0c;以像素为单位。在Java坐标系中&#xff0c;第一个是x坐标&#xff0c;表示当前位置为水平方向&#xff0c;距离坐标原点x个像素&#xff1b;第二个是y坐标&#xff0c;表示当前位置为垂直…

初学stm32 --- 系统时钟配置

众所周知&#xff0c;时钟系统是 CPU 的脉搏&#xff0c;就像人的心跳一样。所以时钟系统的重要性就不言而喻了。 STM32 的时钟系统比较复杂&#xff0c;不像简单的 51 单片机一个系统时钟就可以解决一切。于是有人要问&#xff0c;采用一个系统时钟不是很简单吗&#xff1f;为…