精华内容
下载资源
问答
  • vue下载文件

    2020-12-22 09:06:37
    let self = this;self.$axios({url: URL地址,type: "get",responseType: "blob"}).then(res =&...res) {this.$message.error("下载失败");return;} else {if (!!window.ActiveXObject || "ActiveXObject" in window...

    let self = this;

    self.$axios({

    url: URL地址,

    type: "get",

    responseType: "blob"

    })

    .then(res => {

    if (!res) {

    this.$message.error("下载失败");

    return;

    } else {

    if (!!window.ActiveXObject || "ActiveXObject" in window) {

    var filename = " NAME " + new Date().toLocaleDateString() + ".xlsx";

    var type = "text/plain; charset=UTF-8";

    var obj = res.data;

    var blob =

    typeof File === "function"

    ? new File([obj], filename, { type: type })

    : new Blob([obj], { type: type });

    if (typeof window.navigator.msSaveBlob !== "undefined") {

    window.navigator.msSaveBlob(blob, filename);

    } else {

    var URL = window.URL || window.webkitURL;

    var downloadUrl = URL.createObjectURL(blob);

    if (filename) {

    var a = document.createElement("a");

    if (typeof a.download === "undefined") {

    window.location = downloadUrl;

    } else {

    a.href = downloadUrl;

    a.download = filename;

    document.body.appendChild(a);

    a.click();

    }

    } else {

    window.location = downloadUrl;

    }

    }

    } else {

    let url = window.URL.createObjectURL(res.data);

    let link = document.createElement("a");

    link.style.display = "none";

    link.href = url;

    var filename = " NAME " + new Date().toLocaleDateString() + ".xlsx";

    link.setAttribute("download", filename);

    document.body.appendChild(link);

    link.click();

    }

    self.fullscreenLoading = false;

    }

    })

    .catch(error => {

    console.log(error);

    });

    展开全文
  • vue下载压缩文件

    2021-01-22 13:45:15
    VUE下载压缩文件 后台C#代码 #region 压缩文件 [Route("api/sys/DownloadFiles")] [HttpGet] public HttpResponseMessage DownloadFiles(string path) { try { string batchCode = path; path =

    vue下载压缩文件

    1. 后台C#代码
    #region 压缩文件
            [Route("api/sys/DownloadFiles")]
            [HttpGet]
            public HttpResponseMessage DownloadFiles(string path)
            {
                try
                {
                    string batchCode = path;
                    path = FileHelper.LocalPath + "\\" + path;
                    if (!Directory.Exists(path))
                    {
                        return null;
                    }
                    var zipFileUrl = FileHelper.LocalPath + batchCode + ".zip";
                    if (File.Exists(zipFileUrl))
                    {
                        File.Delete(zipFileUrl);
                    }
    
                    CreateZipFile(path, zipFileUrl);
                    var stream = new FileStream(zipFileUrl, FileMode.Open);
                    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                    response.Content = new StreamContent(stream);
                    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
                    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                    return response;
                }
                catch (Exception ex)
                {
                    return null;
                }
            }
    
    
            /// 压缩成zip
            /// </summary>
            /// <param name="folderToZip">d:\</param>
            /// <param name="zipedFile">d:\a.zip</param>
            public static void CreateZipFile(string folderToZip, string zipedFile)
            {
                bool result = false;
                if (!Directory.Exists(folderToZip))
                    return;
    
                ZipOutputStream zipStream = new ZipOutputStream(File.Create(zipedFile));
                zipStream.SetLevel(6);
                //if (!string.IsNullOrEmpty(password)) zipStream.Password = password;
    
                result = ZipDirectory(folderToZip, zipStream, "");
    
                zipStream.Finish();
                zipStream.Close();
    
                return;
    
            }
    
            /// <summary>   
            /// 递归压缩文件夹的内部方法   
            /// </summary>   
            /// <param name="folderToZip">要压缩的文件夹路径</param>   
            /// <param name="zipStream">压缩输出流</param>   
            /// <param name="parentFolderName">此文件夹的上级文件夹</param>   
            /// <returns></returns>   
            private static bool ZipDirectory(string folderToZip, ZipOutputStream zipStream, string parentFolderName)
            {
                bool result = true;
                string[] folders, files;
                ZipEntry ent = null;
                FileStream fs = null;
    
                try
                {
                    ent = new ZipEntry(Path.Combine(parentFolderName, Path.GetFileName(folderToZip) + "/"));
                    zipStream.PutNextEntry(ent);
                    zipStream.Flush();
    
                    files = Directory.GetFiles(folderToZip);
                    foreach (string file in files)
                    {
                        fs = File.OpenRead(file);
    
                        byte[] buffer = new byte[fs.Length];
                        fs.Read(buffer, 0, buffer.Length);
                        ent = new ZipEntry(Path.Combine(parentFolderName, Path.GetFileName(folderToZip) + "/" + Path.GetFileName(file)));
                        ent.DateTime = DateTime.Now;
                        ent.Size = fs.Length;
    
                        fs.Close();
                        zipStream.PutNextEntry(ent);
                        zipStream.Write(buffer, 0, buffer.Length);
                    }
    
                }
                catch
                {
                    result = false;
                }
                finally
                {
                    if (fs != null)
                    {
                        fs.Close();
                        fs.Dispose();
                    }
                    if (ent != null)
                    {
                        ent = null;
                    }
                    GC.Collect();
                    GC.Collect(1);
                }
    
                folders = Directory.GetDirectories(folderToZip);
                foreach (string folder in folders)
                    if (!ZipDirectory(folder, zipStream, Path.GetFileName(folderToZip)))
                        return false;
    
                return result;
            }
            #endregion
    
    1. 前台VUE代码
      安装 blob: npm install blob
      安装 axios:npm install axios --save
      引用:import axios from ‘axios’
      import Blob from ‘blob’;
    downloadFile() {
            let url=util.getUrl()+"/api/sys/DownloadFiles"
           this.loading = true;
           axios.get(
            url,//请求的url
            {params:{
                    'path':XX //传参
                },
                responseType:'blob'//服务器返回的数据类型
            }).then((res)=>{
             // 处理返回的文件流
             const content = res.data;
             const blob = new Blob([content], { type: "application/zip" });
             const fileName = this.bathCode+".zip";
             if ("download" in document.createElement("a")) {
               // 非IE下载
               const elink = document.createElement("a");
               elink.download = fileName;
               elink.style.display = "none";
               elink.href = URL.createObjectURL(blob);
               document.body.appendChild(elink);
               elink.click();
               URL.revokeObjectURL(elink.href); // 释放URL 对象
               document.body.removeChild(elink);
             } else {
               // IE10+下载
               navigator.msSaveBlob(blob, fileName);
             }
             this.loading = false;
           });
    
    展开全文
  • vue 下载本地文件

    2021-06-17 15:53:03
    <a :href=`${process.env.BASE_URL}竣工通v1.0操作手册.docx` >操作帮助</a> 1.文件我是放在public目录下的 2.如果你a标签加了download 属性,请保证名字和文件名一样否则无法下载!!
    <a  :href=`${process.env.BASE_URL}竣工通v1.0操作手册.docx` >操作帮助</a>
    

    1.文件我是放在public目录下的
    2.如果你a标签加了download 属性,请保证名字和文件名一样否则无法下载!!

    展开全文
  • Vue 下载文件方式总结

    千次阅读 2021-07-28 19:36:07
    charset=utf-8' //改这里就好了 } }).then(res => { // 文件下载方式二 //window.open(res.data.datas.fileUrl) // 文件下载方式一 window.location.href =res.data.datas.fileUrl }) .catch(function (error) { ...

    第一种方式:使用 window.location.href

    限于使用get方式

    downloadRest(scope){
               this.$axios({
              method:'post',
              url:'/api/upload/file/preview',
              data:{"filePath":scope.row.filePath},
              headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
              }
            }).then(res => {
                // 文件下载方式二
                 //window.open(res.data.datas.fileUrl)
                 // 文件下载方式一
                 window.location.href =res.data.datas.fileUrl
             
            })
              .catch(function (error) {
                console.log(error)
              })
            
          },

    对应SpringBoot 后台业务逻辑代码片段

    /**
    	 * 查询指定文件的预览地址
    	 * 
    	 * @param file
    	 */
    	@ApiOperation(httpMethod = "POST", value = "查询指定文件的预览地址")
    	@RequestMapping(value = "/preview", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    	public Result preview(@RequestBody Map<String, Object> parame) {
    		String filePath = String.valueOf(parame.get("filePath"));
    		MinioUploadEntity entity = new MinioUploadEntity("http://192.168.1.74:9000", "minioadmin", "minioadmin");
    		MinioUploadUtil util = new MinioUploadUtil(entity);
    		String fileUrl = null;
    		try {
    			fileUrl = util.getPreviewAddress(filePath, "gxpt-img");
    		} catch (InvalidKeyException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (ErrorResponseException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (InsufficientDataException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (InternalException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (InvalidResponseException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (NoSuchAlgorithmException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (XmlParserException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (ServerException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (IllegalArgumentException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		}
    		return Result.ok().setData("fileUrl", fileUrl);
    	}

     

    第二种方式:如果后端直接给出了文件在服务器中的地址,可以直接使用a标签或window.open

    ​
    downloadRest(scope){
               this.$axios({
              method:'post',
              url:'/api/upload/file/preview',
              data:{"filePath":scope.row.filePath},
              headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
              }
            }).then(res => {
                // 文件下载方式二
                 //window.open(res.data.datas.fileUrl)
                 // 文件下载方式一
                 window.location.href =res.data.datas.fileUrl
             
            })
              .catch(function (error) {
                console.log(error)
              })
            
          },
    
    ​

    对应SpringBoot 后台逻辑代码

    /**
    	 * 查询指定文件的预览地址
    	 * 
    	 * @param file
    	 */
    	@ApiOperation(httpMethod = "POST", value = "查询指定文件的预览地址")
    	@RequestMapping(value = "/preview", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    	public Result preview(@RequestBody Map<String, Object> parame) {
    		String filePath = String.valueOf(parame.get("filePath"));
    		MinioUploadEntity entity = new MinioUploadEntity("http://192.168.1.74:9000", "minioadmin", "minioadmin");
    		MinioUploadUtil util = new MinioUploadUtil(entity);
    		String fileUrl = null;
    		try {
    			fileUrl = util.getPreviewAddress(filePath, "gxpt-img");
    		} catch (InvalidKeyException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (ErrorResponseException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (InsufficientDataException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (InternalException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (InvalidResponseException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (NoSuchAlgorithmException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (XmlParserException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (ServerException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (IllegalArgumentException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return Result.error("文件预览地址获取失败");
    		}
    		return Result.ok().setData("fileUrl", fileUrl);
    	}

     

    第三种方式:使用blob类型

    download(scope){
          // 通过blob 下载文件方法暂时未调试成功
              this.$axios.get('/api/upload/file/fileDownload?filePath=' +scope.row.filePath).then(function(response){   
         if (!response.data) {
            this.$Message.error('下载内容为空')
            return
          }
          const disposition = response.headers['content-disposition'];
          let fileName = disposition.substring(disposition.indexOf('filename=') + 9, disposition.length);
    
          let url = window.URL.createObjectURL(new Blob([response.data]), {
    type: "image/jpeg"
    })
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName)
            
          document.body.appendChild(link)
          link.click()
          //释放URL对象所占资源
          window.URL.revokeObjectURL(url)
          //用完即删
          document.body.removeChild(link)
    }).catch(function (response){
    	console.log(response);//发生错误时执行的代码
    });
          }

    对应SpringBoot 后台逻辑代码片段

    /**
    	 * 文件下载
    	 *
    	 */
    	@ApiOperation(httpMethod = "GET", value = "下载指定文件")
    	@RequestMapping(value = "/fileDownload", method = RequestMethod.GET)
    	public void fileDownload(HttpServletRequest request, HttpServletResponse response) {
    		String filePath = request.getParameter("filePath");
    		MinioUploadEntity entity = new MinioUploadEntity("http://192.168.1.74:9000", "minioadmin", "minioadmin");
    		MinioUploadUtil util = new MinioUploadUtil(entity);
    		GetObjectResponse fis = null;	
    		try {
    		
    			fis = util.downloadFile(filePath, "gxpt-img");
    //          输出Minio 文件头信息
    //			Headers headers = fis.headers();
    //			Iterator<Pair<String, String>>  iterators = headers.iterator();
    //			iterators.forEachRemaining(obj -> {
    //				response.setHeader(obj.getFirst(), obj.getSecond());
    //			});
    			
    			response.setHeader("Content-Disposition", "attachment; filename=" + filePath);
    			response.setContentType("image/jpeg");
    			IOUtils.copy(fis, response.getOutputStream());
    			response.flushBuffer();
    		} catch (FileNotFoundException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		} finally {
    			if (fis != null) {
    				try {
    					fis.close();
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    		}
    
    	}

    MINI 类型

    展开全文
  • vue 下载插件downloadjs

    2021-10-18 20:54:50
    安装依赖 npm install downloadjs 使用范例 ...下载文本——“{{ text }}”</button> </div> </template> <script> import download from "downloadjs"; export de.
  • vue下载静态的模板

    2021-07-29 17:40:58
    name // 如果跳转页面,则在其他页面跳转 a.target = '_blank' // 将生成的URL设置为a.href属性 a.href = url // 触发a的单击事件 a.dispatchEvent(event) } 文件放在public/doc文件夹中 下载文件模板</el-link> ...
  • // download 属性定义了文件名称,并且是必填,不然会页面会自动识别为跳转路径,而不是文件下载地址 link.setAttribute("download", item.name); document.body.appendChild(link); link.click(); // 销毁添加的a...
  • VUE下载文件并修改文件名

    千次阅读 2021-04-26 21:31:42
    通常js下载文件并修改文件名大部分人认为是不行的,那么今天给大家带来一个可行的方法 首先我们下载文件时使用接口请求的方式 import axios from 'axios' export const downloadFile = (url, filename) => ...
  • vue 下载本地静态资源(xls等)

    千次阅读 2021-08-17 14:30:46
    将文件放到静态资源文件夹下面(vue-cli3.x 放到 public ),这里的文件不会被 webpack 处理,他们最终会被复制到打包目录下面。 代码实现 downLoad(){ let a = document.createElement('a'); let evt = document...
  • this.code是要导出文件里的内容,(新建一个a标签来下载) //下载txt文件 const element = document.createElement('a') element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent...
  • vue下载文件并重命名

    2021-09-24 14:40:47
    vue的项目,需要做一个文件上传下载的功能。上传是OK的,然鹅因为上传到minio的时候,使用了随机数命名,导致文件名称就变成了一大串字符。被客户驳回来了。那好吧,就加一个重命名功能好了。 不过这个项目好奇怪,...
  • vue下载所有格式的文件

    千次阅读 2020-12-21 20:06:46
    vue下载所有格式的文件 vue下载所有格式的文件需要先安装downloadjs插件。 downloadjs官网:https://github.com/rndme/download //下载插件 npm install downloadjs //vue引入 import download from 'downloadjs'; ...
  • 记录:vue下载word文档

    2021-01-19 14:49:25
    记录:vue下载word文档 this.$axios({ method: "get", responseType: "blob", //这里如果不设置,下载会打不开文件 arraybuffer或者blob均可以 url: url, }).then(res => { let fileName = e1; // 通过...
  • vue下载文件流图片

    千次阅读 2021-01-11 17:37:31
    我的开发情景是:点击下载-----向后台发出请求-----后台返回图片的文件流 开发目标是:点击下载-----即可下载图片 我的代码: axios({ method: 'post', url: 'UCConfig/QRcode', data: { channel_user_id: row....
  • 最近通过 axios 接口下载文件的时候,文件不能打开,显示文件损坏 是因为在接口请求体中缺少属性 responseType:'blob' export function downloadFileById (id) { return axios({ responseType: 'blob', url: ...
  • vue 下载模板excle 报错 无法打开 最近有个需求是要下载模板以供后来导入提供样式 效果如图 点击下载后左下角会出现所下载的文件 但是后来确报错无法下载 具体解决代码如下: 下面展示一些 内联代码片。 // 划重点 ...
  • vue下载依赖的问题

    2021-04-26 17:33:54
    vue下载依赖的问题 在vue项目里下载node_modules时 npm install --save 因为使用的是外网服务,容易报错 用国内镜像 cnpm install --save 会出现各种意想不到的bug 解决方案 npm install --registry=...
  • export const modelDemo = query => { return request({ url: './toolsManage/model_demo', method: 'get', params:query, ...vue封装的接口中 加上responseType: 'arraybuffer' axios.get('/tools..
  • vue 下载word等文档

    千次阅读 2020-12-25 10:50:38
    // 下载 getdownloadInfo(row) { let url = row.reportUrl const fileName = url ; if ("download" in document.createElement("a")) { let downloadElement = document.createElement("a"); downloadElement....
  • 目录 ...2.前端使用axios下载txt文件 二、后端SpringBoot接口 1.跨域配置 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; i
  • PDF 下载方法一 这个方法是通过调用服务,服务端给前端返回pdf文件流(不是字节流)。在用blob下载。貌似所有方法都是文件流下载的吧。 // 后端服务地址方法 api(id).then(res => { let blob = new Blob(...
  • Vue 下载 blob 流文件

    2021-03-02 10:58:33
    Vue 下载 blob 流文件 // 下载文件 showFile(item) { this.$http({ method: 'post', url: '/fileApi/downLoadFile', responseType: 'blob', data: { 'flieName': item.fileName }, }).then
  • 1、创建downLoad.js文件 class Download { //引用调用的方法,传入文件名称和bas64格式的文件 downloadFile(fileName, content) { let aLink = document.createElement('a'); let blob = this.base64ToBlob...
  • 最近在做商城类网站,要实现用户资质及商品资质下载功能 下面直接上代码 let url = window.URL.createObjectURL( new Blob([data], { type: "application/zip" }) ); let link = document.createElement("a"); ...
  • vue下载与安装详细教程

    千次阅读 多人点赞 2021-06-10 23:50:46
    ①、进入node官网...勾选,帮我们自动下载插件 ③、在cmd中输入node -v,若出现版本号,则安装成功 ④、如果npm包管理不想存放C盘的话,那就手动创建红框里的两个文件夹于安装路径中 https://developer.aliy
  • .net core+vue下载文件

    2021-08-12 14:46:15
    methods: { ... //下载 this.axios({ method: "post", url: "", //后台请求路径 responseType: "blob", //这里一定要设置 }) .then((response) => { let content = response.data; let el
  • vue下载文件和图片,窗口的打开关闭根据图片路径下载到本地(解决图片跨域问题)下载文件打开窗口关闭窗口 根据图片路径下载到本地(解决图片跨域问题) /** * 根据图片路径下载图片 * @param imgsrc 图片地址 *...
  • vue项目,axios去请求接口 request文件中代码: import request from "封装好的axios请求文件" //下载用户手册PDF时请求的接口 export const getGuide = (param) => { return request({ url:"请求url", ...
  • 最近做导出功能,发现一个问题,后端导出功能正常,用postman测试正常能导出,但是前端vue却无法下载,原因是无法获取响应头中的Content-Disposition(可替换是 *),记录一下小问题。 response.setHeader("Access-...
  • 接着有一个下载的功能,一般都是后端甩一个链接你放上面就好,但是这个小功能再去找一个后端搞,太夸张了吧,那我们就自己搞! 方法当然是非常多的,但是我试了几种,总是会报一个错误;“未发现文件”,还有的时候...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 130,807
精华内容 52,322
关键字:

vue下载

vue 订阅