Vue利用Blob下载原生二进制数组文件

2024-12-01 19:50:51

本文实例为大家分享了Vue利用Blob下载原生二进制数组文件的具体代码，供大家参考，具体内容如下

在服务端推送过来的二进制数组(JSON格式），在前端要处理成JS原生数组以后才能做成Blob，有两个地方要注意（详细注释），代码如下：

Vue.prototype.$downloadFile = (filename, data) => {
 if (!data) return;
 let arr8 = Uint8Array.from(data); //！！！注意1：应根据数据的类型选择适当的JS原生数组类型进行转换，也就是说服务端推送的byte型数组还是int型数组等。
 //定义文件内容，类型必须为Blob 否则createObjectURL会报错
 let blob = null;
 let type = 'application/octet-binary';
 if (typeof (window.Blob) == "function") {
  blob = new Blob([arr8], {//！！！注意2：数组两边必须加上[]
   type: type
  });
 } else {
  let BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
  let bb = new BlobBuilder();
  bb.append([arr8]);
  blob = bb.getBlob(type);
 }
 let URL = window.URL || window.webkitURL;
 let bloburl = URL.createObjectURL(blob);
 let anchor = document.createElement("a");
 if ('download' in anchor) {
  anchor.style.visibility = "hidden";
  anchor.href = bloburl;
  anchor.download = filename;
  document.body.appendChild(anchor);
  let evt = document.createEvent("MouseEvents");
  evt.initEvent("click", true, true);
  anchor.dispatchEvent(evt);
  document.body.removeChild(anchor);
 } else if (navigator.msSaveBlob) {
  navigator.msSaveBlob(blob, filename);
 } else {
  location.href = bloburl;
 } //移除链接释放资源
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue实现Excel文件的上传与下载功能的两种方式

一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu
vue element中axios下载文件（后端Python）

•axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c
vue+axios实现post文件下载

本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下功能:点击导出按钮,提交请求,下载excel文件: 这里是axios的post方法.get方法请点击这里=>here 第一步:跟后端童鞋确认交付的接口的response header设置了以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firs
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)

vue-cli+axios实现附件上传下载记录: 上传: 这里用formData格式传递参数:请求成功后后台返回上传文件的对应信息. 重点是下载: ############## downloadfile(res) { var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //applicati
vue + axios get下载文件功能

本文实例为大家分享了vue + axios 下载文件的具体代码,供大家参考,具体内容如下这里是axios的get方法.post方法请点击这里=>here 注意点: Herder 请求头需注意 content-disposition:"attachment;filename=total.xls" content-type:"application/x-download;charset=utf-8" axios请求的responseType为blob respo
Vue 中批量下载文件并打包的示例代码

思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver 2. 下载文件 import axios from 'axios' const getFile = url => { return new Promise((resolve, reject) => { a
vue实现文件上传读取及下载功能

本文实例为大家分享了vue实现文件上传读取及下载的具体代码,供大家参考,具体内容如下文件的上传利用input标签的type="file"属性,读取用FileReader对象,下载通过创建a标签实现 <template> <div class="filediv"> <el-button @click="downloadFile">下载</el-button> <div id="fil
vue+axios实现文件下载及vue中使用axios的实例

功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response =>
Vue利用Blob下载原生二进制数组文件

本文实例为大家分享了Vue利用Blob下载原生二进制数组文件的具体代码,供大家参考,具体内容如下在服务端推送过来的二进制数组(JSON格式),在前端要处理成JS原生数组以后才能做成Blob,有两个地方要注意(详细注释),代码如下: Vue.prototype.$downloadFile = (filename, data) => { if (!data) return; let arr8 = Uint8Array.from(data); //!!!注意1:应根据数据的类型选择适当的JS原生数组
vue后台返回格式为二进制流进行文件的下载方式

目录后台返回格式为二进制流进行文件的下载结合项目中具体文件使用 vue下载保存二进制文件方法封装:util.js 请求接口方法调用后台返回格式为二进制流进行文件的下载结合项目中封装get请求携带token,进行接收二进制流 export function getHeader() { const token = getToken(); if (token) { return { headers: {
前端vue a链接下载文件失败的问题(未发现文件)

目录前端vue a链接下载文件失败(未发现文件) 错误案例完整代码 vue点击下载的避坑指南引入避坑之路 blob对象前端vue a链接下载文件失败(未发现文件) 错误案例发现出现错误后,我们去下载内容里面看我们下载这个文件的地址 ps:ctrl + j 打开下载内容的快捷键适用于 windows系统可以发现这个文件夹路径不对识别不了我把路径写在根目录下面了 src/assets/... ,应该把你需要下载的文件放在跟src同级的目录下或者放在publice目录里面
vue如何实现二进制流文件导出excel

目录 vue二进制流文件导出excel 前端代码后端node 关于二进制文件流导出Excel文件的一些坑实现下载效果踩坑 vue二进制流文件导出excel 问了一下其他的后端,他们公司前端是a标签,后端是给了一个地址,a标签或者window.open()都可以实现. 我们公司是后端返回的二进制流文件,实现了一下,亲测可以,没有问题前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha
vue+django实现下载文件的示例

一.概述在项目中,点击下载按钮,就可以下载文件. 传统的下载链接一般是get方式,这种链接是公开的,可以任意下载. 在实际项目,某些下载链接,是私密的.必须使用post方式,传递正确的参数,才能下载. 二.django项目本环境使用django 3.1.5,新建项目download_demo 安装模块 pip3 install djangorestframework django-cors-headers 修改文件download_demo/settings.py INSTALLED_APP
vue中如何下载excel流文件及设置下载文件名

概述导出excel需求,当点击下载模板或下载反馈结果,axios发起后端接口请求,返回的数据获取 response 时出现乱码,如图: 现总结如下几种处理方法. 1.通过 url 下载即后端提供文件的地址,直接使用浏览器去下载通过window.location.href = 文件路径下载 window.location.href = `${location.origin}/operation/ruleImport/template` 通过 window.open(url, '_blank'
vue中如何下载文件导出保存到本地

目录 vue下载文件导出保存到本地另一种情况 vue中a标签下载本地文件-未找到,原因及解决错误代码原因解决 vue下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据如何下载 ... <el-button icon="el-icon-download" @click="downl
全网最强下载神器IDM使用教程之利用IDM加速下载百度网盘大文件的方法

目录 01 开发背景 02 功能介绍 03 如何下载百度网盘 1.安装IDM软件 2.配置IDM软件 3.安装油猴脚本 4.下载百度网盘文件推荐阅读: IDM 6.40.11.2 弹窗的完美解决思路一个假冒的序列号被用来注册Internet Download Manager,IDM正在退出的解决办法超实用Internet Download Manager(IDM)破解注册码,全版本通用自从不限速度盘下载工具Pandownload被封杀后,有些网友纷纷表示:幸好我们还有IDM. 但是,对于
将文件上传、下载(以二进制流保存到数据库)实现代码

1.将文件以二进制流的格式写入数据库首先获得文件路径,然后将文件以二进制读出保存在一个二进制数组中,与数据库建立连接,在SQL语句中将二进制数组赋值给相应的参数,完成向数据库中写入文件的操作复制代码代码如下: /// 将文件流写入数据库 /// </summary> /// <param name="filePath">存入数据库文件的路径</param> /// <param name="id">数据库中插入文
在.NET中利用XMLHTTP下载文件的代码

利用XMLHTTP下载文件,和以前的方法一样,先添加引用-COM-Microsoft Xml 3.0,然后在代码开始处写: using MSXML2; 下面就是主要的代码: private void Page_Load(object sender, System.EventArgs e){ string Url = "http://dotnet.aspx.cc/Images/logoSite.gif"; string StringFileName = Url.Substring(U

Vue利用Blob下载原生二进制数组文件

相关推荐

随机推荐