精华内容
下载资源
问答
  • vue下载文件导出保存到本地

    千次阅读 2021-03-10 10:56:12
    vue下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地址,res.data 中是返回的二进制数据 如何下载 ... ...

    vue中下载文件导出保存到本地

    先分析如何下载:先有一个链接地址,然后使用 location.hrefwindow.open()下载到本地

    看看返回数据
    在这里插入图片描述
    res.config.url 中是下载链接地址,res.data 中是返回的二进制数据

    如何下载

    ...
    <el-button icon="el-icon-download" @click="download(id)"></el-button>
    ...
    download(id) { // 导出
      this.$API({
        name: 'Download',
        paths: [id]
      }).then(res => {
        // window.open(res.config.url, '_self')或者
        window.location.href = res.config.url
      }).catch(error => {
        this.$message({ type: 'error', message: error })
      }).finally(() => {
      })
    }
    

    上面情况针对的是后端返回文件流,如果后端返回的是文件名
    在这里插入图片描述
    通用下载方法

    window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true
    

    这样就能实现在当前窗口下载文件了

    另一种情况

    如果下载的文件既可以是txt文件或html文件也可以是压缩包等,对于这种类型的下载处理

        download (row) { // 下载
          this.$API({
            name: 'DownloadResource',
            params: {
              path: row.path,
              token: this.$Cookies.get('token')
            },
            headers: {
              'Content-Type': 'application/octet-stream'
            },
            requireAuth: true
          }).then (res => {
            window.open(`${res.config.url}?path=${res.config.params.path}&token=${res.config.params.token}`, '_self')
          }).catch(error => {
            this.$message.error(error)
          })
        }
    

    对于 headers 中的 'Content-Type': 'application/octet-stream' ,需要在 axios 拦截器中单独处理
    建议把 res 打印出来看里面包含的内容

    axios.interceptors.response.use(res => {
      // 处理下载文件的接口
      if (res.config.headers['Content-Type'] === 'application/octet-stream') {
        return res
      }
      if (res.data.code) {
        return Promise.resolve(res)
      } else {
        return Promise.reject(res)
      }
    }, error => {
      return Promise.reject(error)
    })
    
    展开全文
  • 本次主要分享一下前端如何保存后端返回文件到本地,是否为vue项目均可。 关键点: axios URL.createObjectURL 实现思路: 首先设置axios的响应类型为 responseType: 'blob' ,也就把流文件转换成blob对象;...

    前言

    本次主要分享一下前端如何保存后端返回文件流到本地,是否为vue项目均可。

    关键点:

    • axios 
    • URL.createObjectURL

    实现思路:

          首先设置axios的响应类型为  responseType: 'blob'   ,也就把流文件转换成blob对象;其次用window.URL.createObjectURL()方法生成一个blob对象的url(暂且这么描述吧,主要是太菜了);最后用a标签调用浏览器的文件下载。

          大概就是这样的思路吧,上代码。

    配置axios返回类型:

    //这里axios只做演示,实际使用需要二次封装的
    
    axios.post('http://xxx.com/file, {id:1}, { responseType: 'blob' })
          .then(res => {
           saveFile(res,'xxx.xls') //这里要传入文件名以及文件后缀
          })
          .catch(err => {
            
          })
    
    export function saveFile (data, name) {
      try {
        const blobUrl = window.URL.createObjectURL(data)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.download = name
        a.href = blobUrl
        a.click()
        
      } catch (e) {
        alert('保存文件出错')
      }
    }

    或者不配置axios返回类型,使用Blob 构造函数转换也是一样的

    // 不配置axios
    axios.post('http://xxx.com/file, {id:1})
          .then(res => {
    
           // 这里使用blob做一个转换
           const blob = new Blob([res])
    
           saveFile(blob,'xxx.xls') //这里要传入文件名以及文件后缀
          })
          .catch(err => {
            
          })
    
    export function saveFile (data, name) {
        ....
    }

    两种方法是一样的,配置axios 响应类型后,axios自动帮你转换类型而已,至于是手动转还是自动看个人喜好了。

     

    总结:

          1.后端返回的文件流转换成blob对象

           2.使用window.URL.createObjectURL()方法将blob转换成可下载连接

           3.使用a标签下载文件保存本地,下载文件也可以用location.href ,可能体验不是太友好就不介绍了。

     

    THE END

     

     

     

    展开全文
  • 这是我的前端 利用form表单提交 这是前端调用的方法 其实 无论是什么前端 只要能将服务器路径传后台代码就行了 SpringBoot的Controller ...能够实现下载 无论是图片还是文件 都可以 最近项目用到的 记录一下 ...

    这是我的前端 利用form表单提交
    在这里插入图片描述
    这是前端调用的方法
    在这里插入图片描述
    其实 无论是什么前端 只要能将服务器路径传到后台代码就行了
    SpringBoot的Controller
    在这里插入图片描述
    具体的实现方法
    在这里插入图片描述在这里插入图片描述
    能够实现下载 无论是图片还是文件 都可以 最近项目用到的 记录一下

    展开全文
  • vue下载文件和图片,窗口的打开关闭根据图片路径下载到本地(解决图片跨域问题)下载文件打开窗口关闭窗口 根据图片路径下载到本地(解决图片跨域问题) /** * 根据图片路径下载图片 * @param imgsrc 图片地址 *...

    根据图片路径下载到本地(解决图片跨域问题)

     /**
         * 根据图片路径下载图片
         * @param imgsrc 图片地址
         * @param name 保存的图片名
         */
        downloadImage(imgSrc, name) {
            var image = new Image();
            // 解决跨域 Canvas 污染问题,
            image.setAttribute("crossorigin", "anonymous");
            image.onload = function () {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); // 将图片格式转为base64
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "myPhoto"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgSrc + '?time=' + Date.now();  // 注意,这里是灵魂,否则依旧会产生跨域问题
    
        }
    

    下载文件

    使用示例: download(url, “保存名字”);
    备注:url 文件的下载地址

     /**
         * 下载
         * @param  {String} url 目标文件地址
         * @param  {String} filename 想要保存的文件名称
         */
        download(url, filename) {
            if (filename == null || filename.length == 0) {
                  if (url == null || url.length == 0) {
    	            return;
    	      	  }
           		 window.open(url, "_blank").location;
            } else {
                const that = this;
                this.getBlob(url, function (blob) {
                    that.saveAs(blob, filename);
                });
            }
        },
    
     /**
         * 获取 blob
         * @param  {String} url 目标文件地址
         * @return {cb}
         */
        getBlob(url, cb) {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (xhr.status === 200) {
                    cb(xhr.response);
                }
            };
            xhr.send();
        },
    
    
    /**
     * 保存
     * @param  {Blob} blob
     * @param  {String} filename 想要保存的文件名称
     */
    saveAs(blob, filename) {
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, filename);
        } else {
            const link = document.createElement("a");
            const body = document.querySelector("body");
    
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
    
            // fix Firefox
            link.style.display = "none";
            body.appendChild(link);
    
            link.click();
            body.removeChild(link);
    
            window.URL.revokeObjectURL(link.href);
        }
    },
    

    打开窗口

     /**
         * 打开新的网页
         */
        openWithUrl(url) {
            if (url == null || url.length == 0) {
                return;
            }
            if (DeviceHelper.getBrowserType() == "Safari") {
                    const newPage = window.open("newPage", "_blank");
                    newPage.location = url;
             } else {
                    window.open(url, "_blank").location;
            }
        },
    
    

    关闭窗口

    
    	/**
         * 关闭窗口
         */
        closeWindowEvent() {
            const { userAgent } = navigator;
    
            if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
                window.opener = null;
                window.open("", "_self", "");
                // window.open(" ", "_self").location;
                window.location.href = "about:blank";
                window.close();
            } else {
                window.opener = null;
                window.open("", "_self", "");
                // window.open(" ", "_self").location;
                window.location.href = "about:blank";
                window.close();
            }
        },
    
    展开全文
  • 需求:点击 保存 按钮后输入保存的文件名,将 CodeMirror 中的代码写入文件,随后浏览器提供下载。 <el-button type="success" size="mini" icon="el-icon-download" @click="saveSQL">保存</el-button&...
  • 当需要下载时,为了不让每个人都能通过页面a标签点击链接直接保存到本地,所以采用后台临时下载,返回文件流给前端,前端解析文件流,通过浏览器下载到浏览器存储目录中 1.用户点击请求下载文件 2.后端根据请求中...
  • 一.前言 目前接触的项目中,给定的需求是将系统内所有用户的数据整理好,并保存到文件夹内,目的主要是防止用户在实施人员已配置好的基础上由于不熟悉系统,导致...相对来讲确实比较繁琐,所以整理了下载压缩文件到本地
  • SpringBoot文件上传到本地文件夹 最近项目中做到了页面上传文件至本地文件夹功能,并且可以下载查看的小功能特此记录 1、前端部分介绍 项目中使用的前端是Vue + IView样式框架,IView效果图如下 查看部分只要用a...
  • 前端 ...保存后运行nginx.exe文件即可 浏览器输入 http://localhost:8081/#/ 访问项目1 http://localhost:8081/managementplatform/#/ 访问项目2 后端 将后端文件打包成jar文件,并将图片文
  • 我利用blob对象本地URL保存视频文件,同时经过我的测试我的 ``` const BinaryData = [] BinaryData.push(this.PreviewFile) // 这个是通过input type=file传上来的文件对象 this.FileSrc = URL....
  • clone项目到本地 git clone https://github.com/lybenson/bilibili-vue.git 前端运行 cd bilibili-vue npm install npm run dev 后端运行 cd bilibili-vue/bilibili-api npm install npm run dev 为了确保运行正确,...
  • 引言:这次给大家带来Vue导出excel表格实例详解,Vue项目纯前端导出数据到Excel,并保存文件到本地。 安装依赖 在控制台输入 npm install -S file-saver xlsx npm install -D script-loader 引入公用组件js文件 ...
  • Vue入门

    2019-04-16 19:14:55
    * cdn//搜索bootcdn点进去找到vue,找到这个连接,然后右键保存到本地那个文件夹中 https://cdn.bootcss.com/vue/2.6.10/vue.js * 本地保存 vue.js文件 * 模块化安装 npm i vue -D/-S cnpm yarn 引入//...
  • localStorage:本地保存用户信息 Webpack:模块打包,前端项目构建工具首选 SASS(SCSS):CSS预处理语言 Flex:flex弹性布局,简单适配手机、PC端 CSS3:CSS3过渡动画及样式 IScroll:模拟原生app的列表滚动效果...
  • vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-design-vue只是Vue实现的一组ant-designUI模板代码,真正使用的还是VUE环境; 直接引用VUE(直接将代码复制保存成一个html文件即可双击在浏览器...
  • 处理完保存到服务器本地临时的目录下: import os def pre_process(data_path): file_name = os.path.split(data_path)[1].split('.')[0] return data_path, file_name import cv2 def predict(dataset, model,...
  • 2.工作需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的。IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以...
  • Vue路由篇–基础篇

    2021-01-20 14:05:43
    首先要引入这两个js文件,如果不下载的话 可以直接script引入,建议下载保存到本地引入,这样快些 下面是代码以及注释,注释都是自己理解,比较容易懂 Document .active{ font-size: 20px; color:red } ...
  • 也可以下载下来保存到本地,建议下载下来, 保存到本地,可以方便在没有网络的情况下也能进行测试 在线地址: <script src="https://cdn.jsdelivr.net/npm/vue"></script> 下载到本地文件直接按存放...
  • 使用插件可右键打开设计器,直接将代码保存到工程中。 安装插件请在vscode中搜索: jakHuang 或 Form Generator Plugin 运行 确保已经安装node.js 10+ 首次下载项目后,安装项目依赖: yarn 或 npm install ...
  • 支持画图工具,支持保存到本地或保存在内存中(小程序不支持) 线段,射线,矩形,圆弧线,水平线,趋势线,平行线,平行通道,价格通道线,文本,江恩角度线,阻速线,黄金分割,百分比线,波段线,三角形,对称角度,斐波那契周期线...
  • vue导出Excel

    2020-09-28 17:23:42
    今天碰到一个需求,客户需要把table表格可以导出为Excel保存到本地,之前也做过在线预览 下载word文档都是后台给接口。现在是直接把html 表格转为Excle 具体方法如下(实践可用) 1 先安装两个依赖包 1.1 npm ...
  • 首先要引入vue.js文件,也可以下载vue.js到本地 在new Vue方法中定义了属性和方法,属性包括username和code,方法是methods里面的ChangeUserName,然后在div id=app标签里面进行调用属性和方法,这里跟flask不同,...
  • 图片保存到系统中是将有src属性的img值替换为后台传递过来的七牛云地址,导入完成后,部分导入失败的数据可以下载到本地查看 导入的excel文件 使用该导入功能需安装依赖 npm install xlsx 需要
  • vue3.0+typescript+极验

    2021-02-02 14:25:01
    下载保存到本地引入到html文件里面 https://github.com/GeeTeam/gt3-node-sdk/blob/master/demo/static/libs/gt.js 登录界面 <template> <div> <common-layout> <div> <a-row>...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

vue下载文件保存到本地

vue 订阅