精华内容
下载资源
问答
  • 本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下 一、文件上传(基于axios的简单上传) 所使用的技术:axios、springboot、vue; 实现思路:通过h5 :input元素标签进行...
  • 主要介绍了vue中点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 该案例实现前端Vue通过axios请求SpringBoot后台,实现文件下载功能。 filepack : 前端项目 8081端口。 fileServer: 后端项目 8080端口。
  • vue文档下载到本地预览

    万次阅读 2018-10-24 15:57:16
    vue文档下载到本地预览 由于vue文档在服务器在国外,因此访问速度较慢,为了方便文档查看,可以将文档下载到本地预览 步骤 到vue的GitHub仓库下载文档源码 下载node.js和git安装到本地 初始化文档并部署 1...

    将vue文档下载到本地预览

    由于vue文档在服务器在国外,因此访问速度较慢,为了方便文档查看,可以将文档下载到本地预览

    • 步骤
    1. 到vue的GitHub仓库下载文档源码
    2. 下载node.js和git安装到本地
    3. 初始化文档并部署

    1、到vue的GitHub仓库下载文档源码

    vue文档的源码放在GitHub仓库,地址

    https://github.com/vuejs/cn.vuejs.org
    

    将文档下载下来到本地并解压

    在这里插入图片描述


    2、下载node.js和git安装到本地

    node.js安装

    到node.js官网下载最新的安装包

    node.js官网

    https://nodejs.org/en/

    下载带有LTS的版本

    在这里插入图片描述

    然后傻瓜式安装,安装后需要做一些配置,具体参考

    https://www.cnblogs.com/goldlong/p/8027997.html

    Git安装

    git官网

    https://gitforwindows.org/

    在这里插入图片描述

    同样是傻瓜式安装


    3、初始化文档并部署

    初始化

    最后一步win+R–>cmd打开命令行窗口,cd 进入刚刚从GitHub上下载下来的vue文档源码

    然后输入初始化命令并回车

    npm install
    

    在这里插入图片描述

    初始化成功
    在这里插入图片描述

    部署

    依然是在命令行下输入一下部署命令并回车

    npm start
    

    部署成功,默认地址是:http://localhost:4000

    在这里插入图片描述

    到此就可以直接在本地阅读文档了,没有网也可以

    浏览器输入:http://localhost:4000

    在这里插入图片描述


    如果要修改端口的话可以打开根目录中的_config.yml文件

    在这里插入图片描述

    右键–>文本格式打开

    在这里插入图片描述

    在此更改就可以了

    这种部署方式用到的是hexo,一种博客框架,感兴趣的可以去了解,附上官网链接

    https://hexo.io/zh-cn/


    -完

    展开全文
  • Vue.js 资源文件下载

    2020-07-07 14:44:02
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...
  • 主要介绍了vue 使用post/get 下载导出文件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 通过阅读本书,读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。 本书示例丰富、侧重实战,适用于刚接触或即将接触Vue.js的...
  • ant-design-vue离线文档

    2019-09-23 22:32:33
    vue ant design的离线文档, 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
  • vue 文件下载(需调用接口)

    千次阅读 2019-09-26 01:49:26
    methods:{ //下载文件 filerightDown(index,fileName) {//index 接口参数 fileName文件名字 var _this = this; var fileName = fileName; this.$http({ method: "post", ...
    methods:{
      //下载文件
        filerightDown(index,fileName) {//index 接口参数  fileName文件名字
          var _this = this;
          var fileName = fileName;
          this.$http({
            method: "post",
            url: this.HOST + api.download,
            params: {
              fileId: index
            },
            responseType:'arraybuffer'
          })
            .then(res => {
              this.download(res.data,fileName);
            })
            .catch(req => {
              console.log("下载失败", req);
            });
        },
        // 下载文件
        download (data,fileName) {
            if (!data) {
                return
            }
            let url = window.URL.createObjectURL(new Blob([data]));
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', fileName);
            document.body.appendChild(link);
            link.click();
        },  
    }

     

    responseType:'arraybuffer' 
    XMLHttpRequest.responseType 属性是一个枚举类型的属性,返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串,它将使用默认的"text"类型。
    简而言之, responseType 的作用就是设置ajax 数据响应的类型, 你告诉服务器,让服务器返回什么样的数据类型给你;
    new Blob

    Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
     

    转载于:https://www.cnblogs.com/zhaozhenghao/p/11376804.html

    展开全文
  • 本文给大家介绍了vue项目中跨域问题的完美解决方案,通过更改header,使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建),具体内容详情大家跟随脚本之家小编一起学习吧
  • Vue.js学习文档

    2017-06-12 20:48:46
    Vue.js 架构学习
  • Vue 实现post请求文件下载

    千次阅读 2020-11-27 12:22:38
    前端发送post请求,接受后端返回的文件流实现文件下载 // 导出 submitDownload() { axios({ url: 'url地址', method: 'post', data: this.formInline, responseType: 'blob' // 重点在于配置responseType: '...

    前端发送post请求,接受后端返回的文件流实现文件下载

    // 导出
    submitDownload() {
      axios({
          url: 'url地址',
          method: 'post',
          data: this.formInline,
          responseType: 'blob'    // 重点在于配置responseType: 'blob'
      }).then(res => {
          const link = document.createElement('a');  // 创建元素
          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });  
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);   // 创建下载的链接
          //num++
          link.setAttribute('download', '试算平衡表.xlsx');  // 给下载后的文件命名
          document.body.appendChild(link);
          link.click();  // 点击下载
          document.body.removeChild(link);  //  下载完成移除元素
          window.URL.revokeObjectURL(link.href);  // 释放掉blob对象
      })
      .catch(_ => {
      });
    }
    
    展开全文
  • vue实现文件下载

    千次阅读 2021-01-21 18:30:16
    vue文件下载 前言 Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ 一、使用步骤 展示文件文件点击后查看方法为...

    vue中文件下载

    前言

    Vue浏览器文件下载最简单的方法就是用a链接实现,然后加一个download属性。让后端返回[blob]文件格式,需要传递 responseType: ‘blob’

    一、使用步骤

    展示文件,文件点击后查看方法为handlePreview

    <span style="margin-top:50px;">附件</span>
            <el-upload 
                    action=""
                    list-type="text"
                    :on-preview="handlePreview"
                    disabled
                    :file-list="fileList">
            <i class="el-icon-plus"></i>
            </el-upload>
    

    二、使用步骤

    1.设置文件返回类型

    config.responseType='blob'
    

    如图所示:
    在这里插入图片描述

    2.前端请求接口方法

    handlePreview(file) {
            let data={}
            let typeArray=file.url.split(".")
            let type=typeArray[typeArray.length-1]
            debugger
            data.url=file.url
            data.name=file.name
            fileupload._getDownLoad(data).then((res) => {
                let url = window.URL.createObjectURL(new Blob([res]))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', file.name)
                document.body.appendChild(link)
                link.click()
            })
        }
    

    3.后端返回文件接口

    @RequestMapping(value = "/getDownLoad", method = RequestMethod.POST)
        public void getDownLoad(HttpServletResponse response,@RequestBody Imgurl imgurl) throws IOException {
            FileInputStream inputStream = null;
            try{
                File file = new File(imgurl.getUrl());
                inputStream = new FileInputStream(file);
                ByteArrayOutputStream os = new ByteArrayOutputStream();
                byte[] buffer = new byte[1024];
                int length;
                while ((length = inputStream.read(buffer)) != -1) {
                    os.write(buffer, 0, length);
                }
                byte[] data = os.toByteArray();
                response.resetBuffer();
                response.resetBuffer();
                response.setHeader("Content-Disposition", "attachment");
                response.addHeader("file-name",URLEncoder.encode(imgurl.getName(), "UTF-8"));
                response.addHeader("Content-Length", "" + data.length);
                response.setContentType("application/octet-stream; charset=UTF-8");
                IOUtils.write(data,response.getOutputStream());
            }
            catch (IOException e)
            {
                e.printStackTrace();
            }
            finally {
                if(inputStream != null)
                {
                    inputStream.close();
                }
            }
        }
    

    总结

    今天遇到一个vue下载文件的开发功能,按照正常方法请求一直报错,经过请教大神,用a链接简单的方法实现,本文仅仅简单记录自己的开发过程。

    展开全文
  • vue-实现文件下载

    万次阅读 多人点赞 2019-05-15 14:37:03
    相当于后端告诉前端文件的地址,直接使用浏览器去下载 2.以流的形式下载文件 查了一些资料,主要用的代码如下,原文章:入口 在此基础上增加了params,以传参 // 下载模板 handleExportTem () { this....
  • vue 视频下载

    2017-11-01 14:53:50
    2017vue实战 网盘链接 快来下载吧!
  • 因为vue打包后的文件路径与现在不一致,所以需要把文件存放在public文件夹内,才能保证打包后路径不会改变 看代码: <a :href="url.downloadUrl" download="1test.xlsx" style="color: #FFFFFF;">文件...
  • 基于springboot与vue.js开发的前后端分离的超大文件分片上传下载系统,拥有简洁漂亮的界面,实现了G级别文件极速上传下载,断点续传以及秒传功能
  • vue 文件下载

    千次阅读 2020-08-10 09:32:43
    // 自定义文件名 link.click() // 下载文件 URL.revokeObjectURL(objectUrl); // 释放内存 }, (error) => { console.log(error) } ) } 结束语: 希望这篇文章能帮助到大家。 喜欢的加个关注,点个收藏,给个赞~ ...
  • 主要为大家详细介绍了vue实现在线预览pdf文件下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue下载word
  • 然后,将此组件导入.vue文件。 < / template > < script > import VueDocPreview from 'vue-doc-preview' export default { components : { VueDocPreview } } < / script> 您也可以打开demo....
  • vue项目文件下载遇到的坑

    千次阅读 2020-08-20 20:03:18
    场景:后台返回文件数据流,前端进行点击下载。测试接口能通,后端全局解决了跨域问题,控制台报跨域问题的错误,这个问题一般是后台在下载文件的时候...目前项目中还存在一个问题就是下载文件会直接在浏览器打开,
  • 这里可以看到 vue 文件中 @ 绝对路径标识符没有识别 解决方案 先将需要下载文件放入 public 公共资源文件下 将 a 链接的路径改成以 index.html 为基准的相对路径 这样就解决了,下面是下载成功的文件 ...
  • vue中本地文件下载

    千次阅读 2021-05-27 16:02:21
    下载模板</a> 3.页面中引入axios import axios from 'axios'; 4.为了避免中文无法导出,将待导出文件名称改为英文 “ peoplecode.xls ” ,导出后的名称设置为中文名称 “ 员工工号.xls ”; download ...
  • vue下载文件流完整前后端代码

    千次阅读 2020-11-12 13:19:25
    使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping("/download/{docId}") public void download...
  • vue 下载本地文件

    千次阅读 2020-04-29 15:16:25
    有时,我们需在在前端项目中下载本地某个地址的文件模块,这个文件不想放在后端去下载。所以,在这个文件大小不是太大的情况下,我们可以把文件放在前端项目目录中,这样不管开发环境还是生产环境,都能在同样的路径...
  • vue使用下载插件来完成下载文件

    千次阅读 2020-03-09 20:14:58
    leixign vue下载插件 1.当我使用a标签实现下载的时候,是能解决下载的问题,但是会跳转页面。 2.那么我们使用点击事件后,用window.open或者window.localtion.href,那么也会和使用a标签的效果是一样的,用户体验度...
  • SpringBoot+Vue实现文件下载

    千次阅读 2019-07-04 15:35:49
    1、前台vue代码,没有使用axios,用的是this.$http.post来实现的 this.$http({ url: this.$http.adornUrl('/stats/importExportUsers/downloadTemplate'), method: 'post', responseType: 'arraybuffer' })....
  • VUE下载文件并修改文件名

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

    万次阅读 2020-06-04 10:43:17
    1. a标签下载 <a href="" download="">...注意: 一般这样下载文件的都是不带token等验证的下载方法,如果必须带token,可以和后端协商在href后面拼接,然后后端去接受验证 2.通过按钮触发调用接口 <el-b

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 386,790
精华内容 154,716
关键字:

vue文件下载

vue 订阅