H5 下载.csv 文件,兼容各大浏览器。H5+APP下载.csv文件

一.  用 blob 方式 下载.xlsx文件

    文件 -> base64(dataUrl) -> blob -> blobUrl -> <a> 　　　

        const blob = new Blob([result.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) //创建blob
        const a = document.createElement('a') 
        a.href = URL.createObjectURL(blob)  
        a.target = '_blank'
        a.download = ('文件名称' + '.xlsx')  //设置下载文件名称
        document.body.appendChild(a) 
        a.click()
        document.body.removeChild(a) 

    但是这个下载不兼容qq浏览器、百度浏览器、uc浏览器。点击下载后下载文件乱码并且一直是下载失败。但是如果是管理后台不涉及到手机浏览器可以用这个。

二. 插件 js-file-download 下载 

    之前在网上看见 File-Saver 插件比较好用，但是在苹果手机有的机型用不了，文件名乱码并且会下载失败，所以建议使用  js-file-download 插件。

　js-file-download插件也建议在管理端使用，如果不是手机自带浏览器，下载时也是文件名乱码及下载失败。ios端没有问题

npm install js-file-download --save

引入插件

import fileDownload from 'js-file-download' 

　下载文件

const blob = new Blob([result.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) //result.data 是接口返回数据
fileDownload(blob, '文件名称' + time + '.xlsx')

 三. 后来实在其他浏览器确实不兼容，然后接口改了一下

  1.h5页面直接在网页中下载

  2.苹果手机因为兼容性问题这种跳转连接直接下载会失败所以继续采用 js-file-download 插件下载

  3.h5 +app ，因为app是用的uni-app框架搭的，然后用了一个<web-view>把h5链接放进去,所以这里我们用的 HTML5 Plus 框架 http://www.html5plus.org/doc/zh_cn/downloader.html

  4.HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。

// 获取临时token
          this.$api.accessKey().then(res => {
            if (res.data.data.accessKey) {
              const accessKey = res.data.data.accessKey // 临时token
              const parameters = '192.168......'  // 开发请求接口地址
              const official = '正式开发服务器地址' 
              
              // 自定义文件名
              const fileNmae = start + name + '.csv'
              if (process.env.NODE_ENV === 'development') {
                // 开发版
                if (this.isIOS) {
                  // 判断为苹果手机
                  this.getStatticsData(argument, fileNmae)
                } else {
                  // 安卓机
                  if (window.plus) {
                    // 在APP中下载
                    this.APPdownload(parameters, fileNmae)
                  } else {
                    // 直接在网页中下载
                    window.open(parameters)
                  }
                }
              } else {
                // 正式版
                if (this.isIOS) {
                  // 判断为苹果手机
                  this.getStatticsData(argument, fileNmae)
                } else {
                  if (window.plus) {
                    // APP中下载
                    this.APPdownload(official, fileNmae)
                  } else {
                    // 直接在网页中下载
                    window.open(official)
                  }
                }
              }
            }
          })

　当是苹果手机时调用

getStatticsData (params, name) {
      this.$api.statisticsDetail({ params, responseType: 'arraybuffer' }).then(result => {
          const blob = new Blob([result.data], { type: 'text/csv' })
          // fileDownload 苹果手机支持
          fileDownload(blob, name)
        
      })
    },

　当是APP时调用

APPdownload (url, name) {
      /* eslint-disable */  //这里是取消eslint检测
    	var dtask = plus.downloader.createDownload(url, {
         filename:"_downloads/"+name  //设置文件名字
      }, function (d, status) {
    		// d为下载的文件对象
    　　　　if (status == 200) {
            　　var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename)
    			// 下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
    			 // 进行DOM操作
    			plus.runtime.openFile(d.filename);	   //选择软件打开文件
    	    } else {
    	    	// 下载失败
    	    	plus.downloader.clear() // 清除下载任务
    	    }
    	})
    	 dtask.start()// 执行下载
       /* eslint-disable */
    },

手机浏览器下载文件

这是APP点击下载情况