精华内容
下载资源
问答
  • 下载模板//当后端返回的是文件的时候,我们怎么在各大浏览器实现下载功能//后端定义的是传0的时候,我们下载模板templateDownLoad() {getTemplateUrl('0').then(res => {const d = `${BASE_HOST}${BASE_PARJECT_...

    下载模板

    //当后端返回的是文件的时候,我们怎么在各大浏览器实现下载功能

    //后端定义的是传0的时候,我们下载模板

    templateDownLoad() {

    getTemplateUrl('0')

    .then(res => {

    const d = `${BASE_HOST}${BASE_PARJECT_NAME}/下载接口/0`

    const url = d.replace(/\"/g, '')

    const alink = document.createElement('a')

    document.body.appendChild(alink)

    alink.style.display = 'none'

    alink.href = url

    var explorer = window.navigator.userAgent

    if (explorer.indexOf('Firefox') >= 0) {

    alink.download = getTemplateUrl

    const clickEvent = new MouseEvent('click')

    alink.dispatchEvent(clickEvent)

    } else if (explorer.indexOf('Safari') >= 0) {

    alink.target = '_blank'

    alink.addEventListener('click', event => {}, false)

    const clickEvent = new MouseEvent('click', {

    altKey: true

    })

    alink.dispatchEvent(clickEvent)

    } else {

    alink.download = getTemplateUrl

    alink.target = '_blank'

    alink.addEventListener('click', event => {}, false)

    const clickEvent = new MouseEvent('click', {

    altKey: true

    })

    alink.dispatchEvent(clickEvent)

    }

    })

    .catch(error => {

    console.log('error', error)

    })

    },

    在ie浏览器上出现了兼容性的问题,ie浏览器不支持MouseEvent事件,这个时候,只需要做ie对事件的兼容性即可

    beforeCreate() {

    (function(window) {

    try {

    new MouseEvent('test')

    return false // No need to polyfill

    } catch (e) {

    // Need to polyfill - fall through

    }

    var MouseEvent = function(eventType, params) {

    params = params || { bubbles: false, cancelable: false }

    var mouseEvent = document.createEvent('MouseEvent')

    mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

    return mouseEvent

    }

    MouseEvent.prototype = Event.prototype

    window.MouseEvent = MouseEvent

    })(window)

    },

    展开全文
  • 根据后端返回的url实现下载功能

    千次阅读 2020-01-20 17:44:09
    需求描述: 根据后端返回的url实现下载功能 /** download All*/ const downMethod = data => { axios({ method: data.method, url: apiUrl + data.url, params: data.params, responseType: "blob" }).then...

    需求描述: 根据后端返回的url实现下载功能

    /** download All*/
    const downMethod = data => {
      axios({
        method: data.method,
        url: apiUrl + data.url,
        params: data.params,
        responseType: "blob"
      }).then(res => {
        let timestamp = new Date().getTime();
        const link = document.createElement("a");
        let blob = new Blob([res.data], {
          type: getFileType(data.params.fileType)
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = data.fileName + moment(timestamp).format("YYYY-MM-DD"); //下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        // Message({
        //   type: "success",
        //   message: "下载成功",
        //   center: true
        // });
      });
    };
    
    <div style="margin-top:22px;margin-bottom:22px;" v-if="basicInfos.produceAppendix.length>0">
              <div class="download" v-for="(item,index) in basicInfos.produceAppendix" :key="index">
                <span>{{item.appendixName}}</span>
                <span style="cursor:pointer;color:#169BD5;padding-left:15px;" @click="download(item)">下载</span>
              </div>
            </div>
            <div v-else style="margin-left:20px;margin-bottom: 16px;">暂无附件</div>
    </div>
    

    关键操作:调用utils.js里面的方法,处理文件名称。

    //method里面的方法
        // 下载
        download(item) {
          utils.downMethod({
            method: "get",
            url: "/download",
            fileName: item.appendixName.split(".")[0], //截取文件名
            params: {
              fileType: item.appendixName.split(".")[1], //截取文件名后缀
              filePath: item.appendixAddress
            }
          });
        },
    
    展开全文
  • 主要介绍了vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 前端实现下载功能时,记录使用接口返回文件流得形式进行下载 1,可以通过后端返回的链接a标签直接下载 2,有时候是后端接口返回得文件流进行下载 3,前端生成表格文件下载 第一步我们写一个获取 blob 得方法 /** *...

    前端实现下载功能时,记录使用接口返回文件流得形式进行下载
    1,可以通过后端返回的链接a标签直接下载
    2,有时候是后端接口返回得文件流进行下载
    3,前端生成表格文件下载

    第一步我们写一个获取 blob 得方法

    /**
     * 获取 blob
     * @param  {String} url 目标文件地址
     * @return {Promise}
     */
    function getBlob (url) {
        return new Promise(resolve => {
          const xhr = new XMLHttpRequest()
      
          xhr.open('get', url, true)
          xhr.responseType = 'blob'
          xhr.onload = () => {
            if (xhr.status === 200) {
              resolve(xhr.response)
            }
          }
      
          xhr.send()
        })
      }
    

    第二步

     /**
       * 保存
       * @param  {Blob} blob
       * @param  {String} filename 想要保存的文件名称
       */
      function 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)
        }
      }
    

    第三步 实现下载文件

     /**
       * 下载
       * @param  {String} url 目标文件地址
       * @param  {String} filename 想要保存的文件名称
       */
      export function download (url, filename) {
        getBlob(url).then(blob => {
          saveAs(blob, filename)
        })
      }
    

    这样我们就实现了下载文件功能

    完整js代码

    /**
     * 获取 blob
     * @param  {String} url 目标文件地址
     * @return {Promise}
     */
    function getBlob (url) {
        return new Promise(resolve => {
          const xhr = new XMLHttpRequest()
      
          xhr.open('get', url, true)
          xhr.responseType = 'blob'
          xhr.onload = () => {
            if (xhr.status === 200) {
              resolve(xhr.response)
            }
          }
      
          xhr.send()
        })
      }
      
      /**
       * 保存
       * @param  {Blob} blob
       * @param  {String} filename 想要保存的文件名称
       */
      function 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)
        }
      }
      
      /**
       * 下载
       * @param  {String} url 目标文件地址
       * @param  {String} filename 想要保存的文件名称
       */
      export function download (url, filename) {
        getBlob(url).then(blob => {
          saveAs(blob, filename)
        })
      }
      
    

    接下来我们就实际页面中去调用下载功能

    1. 引入js文件到目标组件
    2. 调用方法传参,实现下载文件
    import { download } from '@/components/downLoadFile';
    export default {
      methods: {
      	dlf(url,name){
    		download(url, name);
    	}
      }
    }
    
    

    参考文档

    MDN web docs

    展开全文
  • 之前遇到一个问题:就是做下载excel表格功能时,不知道怎么把后端返回的文件流转化成表格数据,上网看了很多方法,可能自己没有找对吧,确实可以实现下载,但是下载的表格内容是乱码,个人感觉应该是实现下载函数...

    之前遇到一个问题:就是做下载excel表格功能时,不知道怎么把后端返回的文件流转化成表格,上网看了很多方法,可能自己没有找对吧,确实可以实现下载,但是下载的表格内容是乱码,个人感觉应该是实现下载函数方法写错了,现在实现了,先记录一下,为了方便日后自己的学习。
    在这里插入图片描述
    上图就是调取后端接口成功后返回的文件流;

    接下来我们就一步一步实现下载excel表格的功能,写这个主要是为了自己的学习和记录,如果对你有帮助,我也会很开心,如果有什么不对的,也可以帮我指出错误。

    第一步:先写接口函数(以我的代码为例)

    responseType 表示服务器响应的数据类型,可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’,默认是‘json’

    export function exportAudit(data) {
        return axios({
            url: '/dataassets/asset/audit/export',
            method: 'get',
            params: data,
            responseType: 'blob',
        })
    }
    

    第二步:写个下载文件的函数方法

    // 下载文件
    downloadFile(res, fileName) {
        let blob = new Blob([res.data]); //res为从后台返回的数据
        if (!fileName) {
            fileName = res.headers['content-disposition'].split('filename=').pop();
        }
        if ('msSaveOrOpenBlob' in navigator) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
            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);
            document.body.removeChild(elink);
        }
    }
    

    第三步:组件中调用接口实现下载

      //导出
      export() {
    		    var info={  //需要传入的参数
    		                pageNum: this.pageConfig.currentPage,
    		                pageSize: this.pageConfig.pageSize,
    		                verifyId: this.form.verifyId,
    		                keyWord: this.form.name
    		            }
                exportAudit(info).then((res) => {
                    //日期转换成字符串
                    let date = dateToStr(new Date());
                    // downloadFile是实现表格的下载函数方法
                    downloadFile(res, 'XX报表-' + date + '.xls');
                }).catch(() => {})
         },
    

    这样做就可以实现文件的下载,如果你还没有解决,可以试试!
    在这里插入图片描述

    展开全文
  • 前端根据后端返回的文件流实现下载功能 前段时间实现了一个根据后端接口实现文件下载功能,记录一下。 起初我请求后台数据返回的是这个样子的 需要对此进行操作 1,在统一请求的文件设置相关配置 基于封裝好的請求...
  • 1.引入文件方式: <script type="text/javascript" src="http://happ.thunisoft.com/happ/resources/js/libs/mobile-require-min-v2.1.11.js"></script> 2.打包需更改内容:
  • 最近项目中有这样的需求,用户上传一个xml的文件,服务端对它进行处理,返回一个TXT文件 需要将用户上传的文件保存后,再进行处理,生成TXT文件,返回给用户, 但这样会产生文件冗余的情况,用户上传的文件可以...
  • 用的form实现的一个文件下载功能 到后台处理 因为springmvc返回到原来页面并且跳出下载失败的弹出框
  • 最近在做项目的时候遇到Excel导出功能,后端返回的是文件流,前端如何实现下载功能,以下是项目用的源码,有需要可直接复制使用: // 导出 exporttable() { this.axios({ method: "get", url: this.baseUrls + ...
  • 主要介绍了Android编程调用系统自带的拍照功能返回JPG文件,结合实例形式分析了Android的拍照功能调用及图形文件操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
  • api.bathExportEcologicalById(this.obj).then(res => { let blob = res const reader = new ...// 装换完成, 创建一个a标签用于下载 let a = document.createElement(‘a’) a.style.display = ‘none’ a.d
  • 下载功能 html <a @click="clickDownload1(i)">下载</a> 方法 clickDownload1(i) { if (i === 0) { // 地址拼接需要的文件 也可以直接是后台返回的完整文件 window.location.href = process.env.VUE...
  • //后端返回的数据 let url = window.URL.createObjectURL(content) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('id', 'dow...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,977
精华内容 1,590
关键字:

下载返回功能