vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载

方法一：a标签

// 下载
const downLoad = (url: string, name: string,type:string) => {var xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'arraybuffer'; // 返回类型blobxhr.onload = function () {if (xhr.readyState === 4 && xhr.status === 200) {let blob = this.response;// 转换一个blob链接// 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，// 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定let downLoadUrl =''if (type==='视频'){downLoadUrl = window.URL.createObjectURL(new Blob([blob], {type: 'video/mp4'}));} else if (type === '图片' || type === '文件'){downLoadUrl = url}// 视频的type是video/mp4，图片是image/jpeg// 01.创建a标签let a = document.createElement('a');// 02.给a标签的属性download设定名称a.download = name;// 03.设置下载的文件名a.href = downLoadUrl;// 04.对a标签做一个隐藏处理a.style.display = 'none';// 05.向文档中添加a标签document.body.appendChild(a);// 06.启动点击事件a.click();// 07.下载完毕删除此标签a.remove();};};xhr.send()
}

方法二：阿里云——获取文件的下载URL

地址：预览或下载文件 - 对象存储 OSS - 阿里云

1、安装 ali-oss

cnpm install --save ali-oss

2、页面调用，client 中相关的属性需要自己去配置

const downLoad =async (item:any) => {let res:TResponse<TDownType>= await getAliossSetting()let {Code,Data}=resif(Code===200){const OSS = require('ali-oss');person.client = new OSS({// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。region: Data.RegionId,// 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。accessKeyId: Data.AccessKeyID,accessKeySecret: Data.AccessKeySecret,// 从STS服务获取的安全令牌（SecurityToken）。// stsToken: 'yoursecurityToken',// 填写Bucket名称。bucket: Data.Bucket,});}// 配置响应头实现通过URL访问时自动下载文件，并设置下载后的文件名。var ext = item.Url.split('.')[item.Url.split('.').length - 1]const filename = item.Name+'.'+extconst response = {'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`}// item.OldUrl: 'App.Live/教学部/uploads/图片/2022-08-23/e014dca2f0ff4f1e90ac931f32018140.png'// 填写Object完整路径。Object完整路径中不能包含Bucket名称。const URL = person.client.signatureUrl(item.OldUrl, { response });window.location.href=URL
}

3、哪里需要哪里调用

// 图片下载
const dowmClick=(item:any)=>{downLoad(item)
}

方法三：window.location.href 或 window.open

window.location.href = url
或
window.open(url)

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载相关推荐

python word,ppt,excel转pdf(word转html),转图片
word,ppt,excel转pdf 装依赖 pip install comtypes==1.1.10 转换 import comtypes.client import osdef ppt_pdf(p ...
使用vue框架，在线打开 word、excel、pdf 这三种格式的文件的方式。
背景: 用户要求上传的word.excel.pdf 能够在线预览,要求不是很高,能打开查看一下大致内容就行. 准备工具:Vue.Nginx(没有它或者准备一个可以回传文件的后端接口就行,这个在这里用于 ...
【iOS_GitHub】文档/文件查看器（支持本地或者其他app分享过来的word、excel、pdf、rtf等格式文件）
DocViewer(文档/文件查看器) Function Description 文档查看器(Word && Excel && PDF && Rft | ...
【学习记录20】vue使用blob流预览word ，Excel，pdf，TXT，图片，视频
TXT,PDF直接使用浏览器本身预览 excel使用插件 xlsx,这个插件需要用到arraybuffer的流格式,我是使用前端转换的详见js代码,也可以叫后台返回arraybuffer的数据流 wo ...
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群大家好,我是漫步,明天有个抽奖,记得去参与.张鑫旭最新的CSS书,免费送10本前言因为业务需要,很多文件需要在前端实现预览,今天 ...
vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
访问内网文件思路如下: 1.后端将word.excel.pdf文件转为二进制文件流前端将文件流转为html从而实现文件预览 2.pdf没这么复杂具体可看下文 3.ppt的实现方式是后端将ppt转为p ...
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
文章目录实现方案一.docx文件实现前端预览 1.docx-preview 2.Mammoth 二.PDF文件实现前端预览 1.pdf.js 2.pdfobject.js 3.vue-pdf 4. ...
微信小程序语音录制功能和文件（ppt、word、excel、pdf、txt格式）上传
语音录制提醒:因为开发者工具不能接收语音文件,所以要使用真机调试测试噢~ 思路:使用小程序API wx.startRecord .wx.stopRecord 方法(调用前记得 app.js 添加 ...
【e悦读】支持PDF转WORD/PPT/Excel等
[e悦读更新]支持PDF转WORD/PPT/Excel等 [重磅信息]e悦读ON-LINE 研发出新功能,目前支持7种功能: 1. PDF转word 2. PDF转html(网页) ...
java实现文件加密(word、excel、pdf、ppt)
导航 FileEncryUtils 测试环境 pom依赖 log4j.properties 代码 FileEncryUtils 提供word.excel.pdf.ppt的加密测试环境 JDK1.8+ ...

vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载

方法一：a标签

方法二：阿里云——获取文件的下载URL

方法三：window.location.href 或 window.open

vue 实现 word、ppt、excel、图片、PDF、视频、音频等格式的文件下载相关推荐

最新文章

热门文章