file-saver生成excel表直接上传给后台

木鱼硕 2021-01-06 06:34:58

使用
npm install file-saver --save
bower install file-saver
在浏览器上能够把table生成excel表，但是不能下载，生成后直接传给后台，咋来？？？？？？？



export2Excel() {

                let tables = document.getElementById("out-table");

                let table_book = this.$XLSX.utils.table_to_book(tables);

                var table_write = this.$XLSX.write(table_book, {

                    bookType: "xlsx",

                    bookSST: true,

                    type: "array"

                });

                try {

                    let userAgent = navigator.userAgent;

                    //兼容ie浏览器

                    if (userAgent.indexOf('Trident') !== -1 && userAgent.indexOf('Windows') !== -1) {

                        let blob = new Blob([table_write], {type: 'application/octet-stream'});

                        console.log(blob);

                        this.$FileSaver.saveAs(blob, "sheetjs.xlsx");

                    } else {  //兼容谷歌  火狐

                        let file = new File([table_write], "sheetjs.xlsx", {type: "application/octet-stream"});

                        console.log(file);

                        this.$FileSaver.saveAs(file);

                    }

                } catch (e) {

                    if (typeof console !== "undefined") console.log(e, table_write);

                }

                return table_write;

            },

...全文

19010 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

木鱼硕 2021-01-21

打赏
举报

谢啦

路人Enn 2021-01-21

打赏
举报

这里有个生成json并下载的例子，希望能帮到你~


const DownloadBtn = () => {
  function createDownload() {
    const fileBlob = new Blob([JSON.stringify({
      name: 'hello',
      title: 'world'
    })], {
      type: 'application/json;charset=utf-8',
    });
    
    const url = window.URL.createObjectURL(fileBlob)
    const aLink = document.createElement('a')
    aLink.style.display = 'none'
    aLink.href = url
    aLink.setAttribute('download', 'temp.json')
    document.body.appendChild(aLink)
    aLink.click()
    document.body.removeChild(aLink)
    /** 释放掉blob对象 */
    window.URL.revokeObjectURL(url)
  }
  return <button onClick = {() => createDownload()}> 生成并下载文件 </button>
}

function App() {
  return ( 
    <div className = "App" >
      <DownloadBtn />
    </div>
  )
}