精华内容
下载资源
问答
  • 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 文件下载(需调用接口)

    千次阅读 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文件下载的几种方式

    万次阅读 多人点赞 2019-04-03 10:05:23
    第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <...

    第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单:

    <a :href='"/user/downloadExcel"' >下载模板</a>
    
    另一种情况是创建div标签,动态创建a标签:
    <div name="downloadfile" onclick="downloadExcel()">下载</div>
    function downloadExcel() {
        let a = document.createElement('a')
        a.href ="/user/downloadExcel"
        a.click();
    } 
    还有一种补充:
     function downloadExcel() {
        window.location.href = "/tUserHyRights/downloadUsersUrl";
    } 
    

    第二种方式通过创建iframe的方式:

    <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
    //method方法:
    handleExport(row) {
          var elemIF = document.createElement('iframe')
          elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                        '&category=' + row.category 
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
        }
    

    第三种方式,会对后端发的post请求,使用blob格式

    <el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
    //method方法
    handleExport(row){
    const url="/user/downloadExcel"
    const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
    exportExcel(url,options)
    }
    /**
     * 封装导出Excal文件请求
     * @param url
     * @param data
     * @returns {Promise}
     */
    //api.js
    export function exportExcel(url, options = {}) {
      return new Promise((resolve, reject) => {
        console.log(`${url} 请求数据,参数=>`, JSON.stringify(options))
        axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
        axios({
          method: 'post',
          url: url, // 请求地址
          data: options, // 参数
          responseType: 'blob' // 表明返回服务器返回的数据类型
        }).then(
          response => {
            resolve(response.data)
            let blob = new Blob([response.data], {
              type: 'application/vnd.ms-excel'
            })
            console.log(blob)
            let fileName = Date.parse(new Date()) + '.xlsx'
            if (window.navigator.msSaveOrOpenBlob) {
              // console.log(2)
              navigator.msSaveBlob(blob, fileName)
            } else {
              // console.log(3)
              var link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = fileName
              link.click()
              //释放内存
              window.URL.revokeObjectURL(link.href)
            }
          },
          err => {
            reject(err)
          }
        )
      })
    }
    

    如果后端提供的下载接口是get类型,可以直接使用方法一和二,简单又便捷;当然如果想使用方法三也是可以的,不过感觉有点舍近求远了。
    如果后端提供的下载接口是post类型,就必须要用方法三了。

    展开全文
  • 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实现文件上传和文件下载

    万次阅读 多人点赞 2018-08-22 22:09:55
    文件下载文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个...
  • Vue 实现文件下载

    千次阅读 2018-11-29 10:33:36
    功能:点击导出按钮,提交请求,下载excel文件; 第一步:跟后端确认交付的接口的response header设置了 response header 以及返回了文件流。 第二步:修改axios请求的responseType为blob,以post请求为例: axios({...
  • vue文件以及文档.zip

    2019-12-20 08:51:07
    vue.js文件是最新的版本,包含有生产版和开发版本自由选择,还有详细的帮助文档,把几个文件压缩了,下载的时候解压就可用
  • vue 下载本地文件

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

    千次阅读 2018-12-19 19:56:00
     总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:ajax方式请求的数据只能存放在javascipt内存空间, 可以...
  • vue 下载pdf文件

    千次阅读 2019-11-19 16:57:10
    首先安装依赖 npm install html2canvas jspdf --save 封装方法: // pdfMethod.js ...点这里下载 ...这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出
  • springboot整合vue实现上传下载文件

    万次阅读 多人点赞 2019-05-06 18:46:43
    springboot整合vue实现上传下载文件 文章目录springboot整合vue实现上传下载文件1上传下载文件api文件2.上传大文件配置3.vue前端主要部分 环境 springboot 1.5.x 完整代码下载: springboot整合vue实现上传下 1...
  • 1.因为是文件下载,所以在取后台数据的时候,要多传递一个【responseType: ‘blob’】这个参数,是为了最后数据返回时response的data为【blob】文件格式(data: Blob {size: 22528, type: “application/vnd.ms-...
  • VUE项目下载文件,提示未找到文件

    千次阅读 2020-05-17 23:29:43
    VUE项目下载文件,提示未找到文件 是用a标签download属性 文件放在static和assets里都显示未找到文件 最后看到一篇文章说放在public里!而且a标签路径是相对于index.html的。这样可行了。 该文章链接: ...
  • 使用Vue时,我们前端如何处理后端返回的文件流 首先后端返回流,这里我把流的动作拿出来了,我很多地方要用 /** * 下载单个文件 * * @param docId */ @GetMapping(/download/{docId}) public void download(@...
  • vue下载excel文件

    万次阅读 2018-12-28 14:23:07
    * 下载文件 * @param {请求url} url * @param {成功回调函数} _cb * @param {失败回调函数} _catchcb */ export function downLoadFile (url,_cb,_catchcb) { return api.get(url,{responseType: 'blob'},{...
  • vue下载文件导出保存到本地

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

    千次阅读 2020-01-13 10:18:45
    http Content-type对照.../** * 下载文件以及文件重命名 * @param item 文件在数据库中存储信息 * @param that this别名 */ export function downFile(item, that) { // xxx是后台接口, yyy是后台需要的数据 ...
  • 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 js下载文件方法

    千次阅读 2019-11-15 11:04:11
    // 下载文件 downFile (item) { const link = document.createElement('a') link.setAttribute("download", item.ATTA_NAME) //下载的文件名 link.href = item.ATTA_URL //文件url link.click() ...
  • 主要介绍了vue中点击按钮下载文件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 下载多个文件

    千次阅读 2020-01-03 14:44:38
    问题: window.location.href 连续...// 多次下载文件 export function downloadFile(url){ const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.styl...
  • 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中一般来说是不建议操作dom的,但要用blob实现文件下载的话,网上全是需要对dom进行操作的,复制粘贴了代码,报错document.createElement is not a function,言归正传,一步步来 1、HTML中 ...
  • vue使用文件下载文件

    千次阅读 2020-04-02 11:02:38
    使用node做了转发,前端请求数据,后端直接返回数据,于是使用node将数据生成了excel文件(这一步详见文章node生成exce),然后返回给前端二进制文件流 第一步:安装Blob npm install blob Blob详解:...
  • VUE实现文件下载

    万次阅读 2019-02-01 15:52:30
    // 下载文件 download (data,row) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = ...
  • vue文件下载功能实现

    千次阅读 2019-10-26 09:02:24
    1、需求:页面中点击下载excel文件 2、实现代码a(后端未开启token验证可用) // mian.js文件中 import axios from 'axios' Vue.prototype.$http = axios axios.interceptors.request.use(function (config) { ...
  • Vue下载文件

    千次阅读 2019-09-16 17:35:36
    //创建下载的链接 downloadElement . href = href ; downloadElement . download = fileName ; //下载后文件名 document . body . appendChild ( downloadElement ) ; downloadElement . click ( ) ; //...
  • vue从后台下载.zip压缩包文件

    万次阅读 多人点赞 2019-10-31 17:43:54
    vue前后端分离,使用element的el-button组件从后台下载文件,并且解决乱码问题 1.添加下载按钮 2.(原始方法,会出现乱码)给按钮添加点击事件,添加接口代码 download: function() { const row = this....
  • Vue.js 资源文件下载

    2020-07-07 14:44:02
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 345,319
精华内容 138,127
关键字:

vue文档下载

vue 订阅