vue 使用post/get 下载导出文件操作
我就废话不多说了，大家还是直接看代码吧~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端项目下载导出文件</title>
</head>
<body>
<script>
/**
* post 方式
* 返回：文件流
* 好处：可以自己修改文件名称 方便调试
*/
let params ={
ListData : this.ListData
}
_this.$http.post(url,params,{responseType:"arraybuffer"} //必须添加项
).then(function(res) {
console.log(res)
var blob = new Blob([res.data], {type: 'application/msword;charset=utf-8'});
var filename = "download.doc";
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = filename;
var body = document.getElementsByTagName('body')[0];
body.appendChild(a);
a.click();
body.removeChild(a);
window.URL.revokeObjectURL(url);
}
/**
* get 方式
* 返回：文件流
* 好处：前台什么都不需要处理 完全后台处理
* 缺点：不变调试（需要确保后台接口稳定）
*/
let exportURL = `api/sysLog/export?content=${content}&ip=${ip}`;
window.open(exportURL, "_blank")
</script>
</body>
</html>
补充知识：双向数据绑定原理(三种实现方式)
大家还是看看代码吧~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定原理(三种实现方式)</title>
</head>
<body>
<input type="text" id="a" />
<span id="b"></span>
<!--
//脏检查
我们说Angularjs（这里特指AngularJS 1.x.x版本，不代表AngularJS 2.x.x版本）双向数据绑定的技术实现是脏检查，大致的原理就是，
Angularjs内部会维护一个序列，将所有需要监控的属性放在这个序列中，当发生某些特定事件时（注意，
这里并不是定时的而是由某些特殊事件触发的），Angularjs会调用 $digest 方法，这个方法内部做的逻辑就是遍历所有的watcher，
对被监控的属性做对比，对比其在方法调用前后属性值有没有发生变化，如果发生变化，则调用对应的handler。
网上有许多剖析Angularjs双向数据绑定实现原理的文章，比如 这篇 ，再比如 这篇 ，等等。
这种方式的缺点很明显，遍历轮训watcher是非常消耗性能的，特别是当单页的监控数量达到一个数量级的时候。
//观察机制
博主之前有一篇转载翻译的文章， Object.observe()带来的数据绑定变革 ，说的就是使用ECMAScript7中的 Object.observe 方法对对象
（或者其属性）进行监控观察，一旦其发生变化时，将会执行相应的handler。
这是目前监控属性数据变更最完美的一种方法，语言（浏览器）原生支持，没有什么比这个更好了。唯一的遗憾就是目前支持广度还不行，有待全面推广。
//封装属性访问器
国产mvvm框架vue.js实现数据双向绑定的原理就是属性访问器。
它使用了ECMAScript5.1（ECMA-262）中定义的标准属性 Object.defineProperty 方法。针对国内行情，
部分还不支持 Object.defineProperty 低级浏览器采用VBScript作了完美兼容，不像其他的mvvm框架已经逐渐放弃对低端浏览器的支持。
-->
<script>
//封装属性访问器
//Object.defineProperty(obj, prop, descriptor)
//obj ，待修改的对象
//prop ，带修改的属性名称
//descriptor ，待修改属性的相关描述
var obj = {};
Object.defineProperty(obj,'a',{
set:function(newVal){
document.getElementById('a').value = newVal;
document.getElementById('b').innerHTML = newVal;
}
});
document.addEventListener('keyup',function(e){
obj.a = e.target.value;
});
</script>
</body>
</html>
以上这篇vue 使用post/get 下载导出文件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue实现点击按钮下载文件功能
项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. <div class="btns"> <el-button size="mini" type="primary" @click="$router.push(`/portal/${item.id}/detail`)">查看软件</el-button> <el-lin
-
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通过Blob对象实现导出Excel功能示例代码
不同的项目有不同的导出需求,有些只导出当前所显示结果页面的表格进入excel,这个时候就有很多插件,比如vue-json-excel或者是Blob.js+Export2Excel.js来实现导出Excel功能.但是有些需求因为数据量太大,成千上万条数据,所以是需要后端拼接,然后输出二进制流文件,然后前端直接下载,这次我们谈谈后者的做法. Blob对象表示一个不可变.原始数据的类文件对象,通常我也叫它二进制流对象.我们可以通过Blob对象实现导出Excel功能,先放上代码: <el-button
-
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 使用post/get 下载导出文件操作
我就废话不多说了,大家还是直接看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端项目下载导出文件</title> </head> <body> <script> /** * post 方式 * 返回:文件流 * 好处:可以自己修改文件名称 方便调试 */ let params ={ ListDa
-
vue-以文件流-blob-的形式-下载-导出文件操作
vue项目中,经常遇到文件导出与下载,有时候是直接返回服务端的文件url,这样直接以a链接下载,或者windown.open对不同类型的文件进行下载或预览.但如果返回的是文件流,则需要做一些其他处理,具体形式如下: 1.首先要确定服务器返回的数据类型. 在请求头中加入: config.responseType = 'blob' 有时候,不是所有接口都需要该类型,则可以对接口做一个判定: // request拦截器 service.interceptors.request.use( config
-
vue通过接口直接下载java生成好的Excel表格案例
通过浏览器直接访问导出接口就会自动下载创建好的 Excel 表格.但是我们在vue里使用axios请求接口,一般是处理json数据,如果要处理文件流数据,需要做下特殊处理即可直接下载文件. 假如 下载Excel接口为:/apis/downExcel,则请求如下 import axios from 'axios' export const exportFile = params => { var param = new URLSearchParams() param.append('beginTi
-
适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:
-
vue内点击url下载文件的最佳解决方案分享
目录 前言 解决方案: 代码实现 注意: 总结 前言 开发中经常遇到这样的功能,用户将文件或附件上传到服务器,后端将文件放到ftp或是其他位置,在前端页面内有下载的入口,有时候,后端返回的是blob,这种情况当然是最好的,但是为了方便,后端也可能返回文件所在位置的url,这时,对前端来说,可能遇到一些问题,比如,下载文件时候浏览器可能会出现闪动,下载图片,json文件等浏览器支持的文件时候,不会下载,而是直接在浏览器内打开这类文件,下面的方法可以完美解决此类问题 解决方案: 封装自定义指令 将u
-
vue项目环境搭建 启动 移植操作示例及目录结构分析
目录 项目搭建 项目创建 项目启动停止 项目目录结构分析 全局脚本配置 index.html详细介绍 main.js入口文件详细 App.vue跟组件介绍 router-index.js 路由介绍 项目搭建 下载node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm,用淘宝源: npm install -g cnpm --registry=https://registry.npm.taobao.org 检测是否安装成功:cnpm -version
-
Vue中点击url下载文件的案例详解
目录 代码实现 使用 注意 封装自定义指令 将url转成bold,在创建a标签下载blob 代码实现 在src 下面的 directive 文件夹下新建目录 downLoadUrl downLoadUrl / index.js文件 /* * 后端返回文件的url,前端创建a标签来下载 * * 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from
-
vue前端实现打印下载示例详解
目录 html2canvas介绍 jspdf介绍 printjs介绍 html2canvas介绍 分享一下几个后台管理系统比较常用的插件:下载.打印 html2canvas是在浏览器上对网页进行截图操作,实际上是操作DOM,这个插件也有好长时间了,比较稳定,目前使用还没有遇到什么bug jspdf介绍 如果下载出来是pdf文件,可以加上jspdf插件,会先通过html2canvas把页面转化成base64图片,再通过jspdf导出 安装 npm i html2canvas jspdf 或 yar
-
Vue实现Excel本地下载及上传的方法详解
相信大家在项目中经常会遇到一些上传下载文件的相关功能,本文就Excel的相关功能进行简述: 咱直接看代码: <div class="import-main-content"> <div class="import-main-button" @click="checkFile"> <div class="import-center" style="cursor: hand">
-
vue增删改查的简单操作
本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', province: '河北省'