精华内容
下载资源
问答
  • 页面数据如下图: export default { data() { return { tableData: [], ... originData: [{"skuId":"00001","skuName":...导出效果如下图: 转载于:https://my.oschina.net/u/3734107/blog/3072645

    页面数据如下图:

    export default {
     data() {
        return {
    	tableData: [],
    	colData: [],
    	 originData: [{"skuId":"00001","skuName":"nameSku0001","w00001":{"warehouseId":"w00001","warehouseName":"仓库1","quantity":50,"lockQuantity":5,"availableQuantity":45},"w00002":{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},"w00003":{"warehouseId":"w00003","warehouseName":"仓库3","quantity":40,"lockQuantity":1,"availableQuantity":39}},{"skuId":"00002","skuName":"nameSku0002","warehouseItem":[{"warehouseId":"w00001","warehouseName":"仓库1","quantity":100,"lockQuantity":5,"availableQuantity":95},{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},{"warehouseId":"w00003","warehouseName":"仓库3","quantity":5,"lockQuantity":5,"availableQuantity":0}],"w00001":{"warehouseId":"w00001","warehouseName":"仓库1","quantity":100,"lockQuantity":5,"availableQuantity":95},"w00002":{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},"w00003":{"warehouseId":"w00003","warehouseName":"仓库3","quantity":5,"lockQuantity":5,"availableQuantity":0}},{"skuId":"00003","skuName":"nameSku0003","warehouseItem":[{"warehouseId":"w00001","warehouseName":"仓库2","quantity":100,"lockQuantity":5,"availableQuantity":95},{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},{"warehouseId":"w00003","warehouseName":"仓库3","quantity":50,"lockQuantity":5,"availableQuantity":45}],"w00001":{"warehouseId":"w00001","warehouseName":"仓库2","quantity":100,"lockQuantity":5,"availableQuantity":95},"w00002":{"warehouseId":"w00002","warehouseName":"仓库2","quantity":200,"lockQuantity":5,"availableQuantity":195},"w00003":{"warehouseId":"w00003","warehouseName":"仓库3","quantity":50,"lockQuantity":5,"availableQuantity":45}}]
    	}
     }
     methods: {
      initData() {
          this.tableData = this.originData.map(res => {
            res.warehouseItem.forEach(item => {
              res[item.warehouseId] = item
            })
            return res
          })
          this.originData[0].warehouseItem.forEach((res) => {
            this.colData.push({
              dataItem: res.warehouseId,
              dataName: res.warehouseName
            })
          })
        },
     exportList() {
          const wscols = [
            { wpx: 220 } // 第一列宽度设置单位px
          ]
          /**
           * 合并单元格元素(decode_range方法解析数据格式)
           {
              s: { //s start 开始
                c: 1,//cols 开始列
                r: 0 //rows 开始行
              },
              e: {//e end  结束
                c: 4,//cols 结束列
                r: 0 //rows 结束行
              }
            }
           */
          const wsMerge = [XLSX.utils.decode_range('A1:A2')]
          /** 头部-行列信息*/
          const header1 = this.colData.map(res => res.dataName).concat('合计')
    
          header1.map((res, idx, array) => {
            const hdMergeObj = {
              s: { r: 0 },
              e: { r: 0 }
            }
            if ((idx + 2) % 1 === 0) {
              array.splice(3 * idx + 1, 0, '', '')
              hdMergeObj['s']['c'] = 3 * idx + 1
              hdMergeObj['e']['c'] = hdMergeObj['s']['c'] + 2
              wsMerge.push(hdMergeObj)
            }
            return res
          })
          const header2 = this.colData.map(() => '库存数量').concat('库存数量')
          header2.map((res, idx, array) => {
            if ((idx + 2) % 1 === 0) {
              array.splice(3 * idx + 1, 0, '锁定数量', '可用数量')
            }
            return res
          })
          const ws = XLSX.utils.aoa_to_sheet([
            ['商品信息'].concat(header1),
            [''].concat(header2)
          ])
          // console.log('header1', ['商品信息'].concat(header1))
          // console.log(header2)
          /** 商品信息-行列信息*/
          const skuInfo = this.tableData.map(res => res.skuId + '\r\n' + res.skuName)
          XLSX.utils.sheet_add_aoa(ws, skuInfo.map(res => [res]), { origin: 'A3' })
          /** 仓库-行列信息(库存数量,锁定数量,可用数量)*/
          const unAllowed = ['skuId', 'skuName', 'warehouseItem']
          const sheetData = this.tableData.map((data) => {
            const filterItem = Object.assign({}, data)
            Object.keys(filterItem)
              .filter(key => unAllowed.includes(key))
              .forEach(key => delete filterItem[key])
            // 重构完数据
            let warehouseDatas = []
            Object.values(filterItem).forEach(res => {
              warehouseDatas = warehouseDatas.concat([res.quantity]).concat([res.lockQuantity]).concat([res.availableQuantity])
              return warehouseDatas
            })
            return warehouseDatas
          })
          // console.log('sheetData', sheetData)
          XLSX.utils.sheet_add_aoa(ws, sheetData, { origin: { r: 2, c: 1 }})
          /** 合计-行列信息*/
          const totalData = this.tableData.map(row => {
            const totlal_quantity = Object.values(row.warehouseItem).map(res => res.quantity).reduce((accumulator, currentValue) => accumulator + currentValue)
            const totlal_lockQuantity = Object.values(row.warehouseItem).map(res => res.lockQuantity).reduce((accumulator, currentValue) => accumulator + currentValue)
            const totlal_availableQuantity = Object.values(row.warehouseItem).map(res => res.availableQuantity).reduce((accumulator, currentValue) => accumulator + currentValue)
            return [totlal_quantity, totlal_lockQuantity, totlal_availableQuantity]
          })
          // console.log('total', totalData, this.colData.length * 3 + 1)
          XLSX.utils.sheet_add_aoa(ws, totalData, { origin: { r: 2, c: this.colData.length * 3 + 1 }})
          // 导出
          const wb = XLSX.utils.book_new()
          XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
          ws['!cols'] = wscols
          // wsMerge.push(XLSX.utils.decode_range('B1:D1')) // 测试数据 仓库1模拟数据
          ws['!merges'] = wsMerge
          console.log(wsMerge)
          XLSX.writeFile(wb, '库存报表按SKU.xlsx')
        }
     }
    }
    

    导出效果如下图:

    转载于:https://my.oschina.net/u/3734107/blog/3072645

    展开全文
  • 关于bootstrap导出文件所有相关js,资料齐全。导出文件不用再走后台。
  • FileSaver.js文件导出

    2017-12-08 11:04:03
    FileSaver.js文件导出js文件,能够对网页中的table内容进行导出 导出格式为txt,xhtml,也能够导出图片文件,导出格式为png格式图片 配合Blob.js能够对excl文件格式进行导出
  • js导出文件

    2016-12-06 09:11:25
    js导出文件
  • excel导出js文件.rar

    2020-12-22 10:16:23
    含有jquery.table2excel.js和xlsx.core.min.js两个js文件
  • js文件导出

    2019-08-27 17:02:12
    使用table标签方式将json导出xls文件 p > < button onclick = 'tableToExcel()' > 导出 button > head > < body > < script > function tableToExcel ( ) { //要导出的json数据 const jsonData...
     
               <div class="article-source-link2222">
                    本文链接:<a href="https://blog.csdn.net/hhzzcc_/article/details/80419396">https://blog.csdn.net/hhzzcc_/article/details/80419396</a>
                </div>
            </span>
                    </div>
                                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
                                        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
                <div class="htmledit_views" id="content_views">
                                            <p>&nbsp;</p>
    

     

     

    方法一

    将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html,代码如下

    1. <html>
    2. <head>
    3. <p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
    4. <button onclick='tableToExcel()'>导出</button>
    5. </head>
    6. <body>
    7. <script>
    8. function tableToExcel(){
    9. //要导出的json数据
    10. const jsonData = [
    11. {
    12. name:'路人甲',
    13. phone:'123456',
    14. email:'123@123456.com'
    15. },
    16. {
    17. name:'炮灰乙',
    18. phone:'123456',
    19. email:'123@123456.com'
    20. },
    21. {
    22. name:'土匪丙',
    23. phone:'123456',
    24. email:'123@123456.com'
    25. },
    26. {
    27. name:'流氓丁',
    28. phone:'123456',
    29. email:'123@123456.com'
    30. },
    31. ]
    32. //列标题
    33. let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';
    34. //循环遍历,每行加入tr标签,每个单元格加td标签
    35. for(let i = 0 ; i < jsonData.length ; i++ ){
    36. str+='<tr>';
    37. for(let item in jsonData[i]){
    38. //增加\t为了不让表格显示科学计数法或者其他格式
    39. str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
    40. }
    41. str+='</tr>';
    42. }
    43. //Worksheet名
    44. let worksheet = 'Sheet1'
    45. let uri = 'data:application/vnd.ms-excel;base64,';
    46. //下载的表格模板数据
    47. let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
    48. xmlns:x="urn:schemas-microsoft-com:office:excel"
    49. xmlns="http://www.w3.org/TR/REC-html40">
    50. <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    51. <x:Name>${worksheet}</x:Name>
    52. <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
    53. </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
    54. </head><body><table>${str}</table></body></html>`;
    55. //下载模板
    56. window.location.href = uri + base64(template)
    57. }
    58. //输出base64编码
    59. function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    60. </script>
    61. </body>
    62. </html>

     

    如图:

     

     

     

     

    方法二

    通过将json遍历进行字符串拼接,将字符串输出到csv文件,代码如下

    1. <html>
    2. <head>
    3. <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
    4. <button onclick='tableToExcel()'>导出</button>
    5. </head>
    6. <body>
    7. <script>
    8. function tableToExcel(){
    9. //要导出的json数据
    10. const jsonData = [
    11. {
    12. name:'路人甲',
    13. phone:'123456789',
    14. email:'000@123456.com'
    15. },
    16. {
    17. name:'炮灰乙',
    18. phone:'123456789',
    19. email:'000@123456.com'
    20. },
    21. {
    22. name:'土匪丙',
    23. phone:'123456789',
    24. email:'000@123456.com'
    25. },
    26. {
    27. name:'流氓丁',
    28. phone:'123456789',
    29. email:'000@123456.com'
    30. },
    31. ]
    32. //列标题,逗号隔开,每一个逗号就是隔开一个单元格
    33. let str = `姓名,电话,邮箱\n`;
    34. //增加\t为了不让表格显示科学计数法或者其他格式
    35. for(let i = 0 ; i < jsonData.length ; i++ ){
    36. for(let item in jsonData[i]){
    37. str+=`${jsonData[i][item] + '\t'},`;
    38. }
    39. str+='\n';
    40. }
    41. //encodeURIComponent解决中文乱码
    42. let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    43. //通过创建a标签实现
    44. let link = document.createElement("a");
    45. link.href = uri;
    46. //对下载的文件命名
    47. link.download = "json数据表.csv";
    48. document.body.appendChild(link);
    49. link.click();
    50. document.body.removeChild(link);
    51. }
    52. </script>
    53. </body>
    54. </html>
     

     

     

    如图:

     

     

    ![ ](https://img-blog.csdnimg.cn/20190827170152131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA==,size_16,color_FFFFFF,t_70);

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190827170159413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA==,size_16,color_FFFFFF,t_70)
    展开全文
  • layui导出excel的js文件

    2019-11-15 23:14:30
    layui导出excel的js文件layui导出excel的js文件layui导出excel的js文件layui导出excel的js文件layui导出excel的js文件layui导出excel的js文件
  • JS文件导出功能

    2020-06-23 16:43:28
    JS文件导出功能: 先把responseType设置为blob 然后请求接口后,拿到数据: const that = this const fileReader = new FileReader() fileReader.onload = function () { try { const jsonData = JSON.parse(this....

    JS文件导出功能:
    先把responseType设置为blob
    然后请求接口后,拿到数据:

    const that = this
    const fileReader = new FileReader()
    fileReader.onload = function () {
      try {
        const jsonData = JSON.parse(this.result)
        if (jsonData.code) {
          // 说明是普通对象数据,后台转换失败
          that.$message({
            type: 'error',
            message: jsonData.message
          })
        }
      } catch (err) {
        // 解析成对象失败,说明是正常的文件流
        var elink = document.createElement('a')
        var blob = new Blob([res])
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.setAttribute('download', '文件名' + '.xls') // 设置下载文件名称
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    }
    fileReader.readAsText(res)
    
    展开全文
  • 导出文件js

    2020-02-21 22:29:00
    第一种 function diseaseInfo(){ let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = '/yxcAdmin/disease/export/excel' iframe.onload = function () { ...

    第一种

    function diseaseInfo(){
    	let iframe = document.createElement('iframe')
    	iframe.style.display = 'none'
    	iframe.src = '/yxcAdmin/disease/export/excel'
    	iframe.onload = function () {
    	   	document.body.removeChild(iframe)
    	}
    	document.body.appendChild(iframe)
    }
    

    第二种

    请求类型为{Content-Type:application/json}
    响应类型要设置为:{responseType: "blob"}
    
    const blob = new Blob([result]);
    const fileName = '医院疾病.xlsx';
     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); // 释放URL 对象
     document.body.removeChild(elink);
    

    第三种

    xhr.responseType = "blob";  // 返回类型blob
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
    xhr.onload = function (result) { // 请求完成
        if (this.status === 200) {
            // 返回200
            console.log(this)
            console.log(result)
            var blob = this.response;
            console.log(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);  // 转换为base64,可以直接放入a表情href
            reader.onload = function (e) {
             // 转换完成,创建一个a标签用于下载
             var a = document.createElement('a');
             a.download = templateName + '.xlsx';//xls
             console.log(e);
             a.href = e.target.result;
             $("body").append(a);  // 修复firefox中无法触发click
             a.click();
             $(a).remove();
            }
        }
    };
    
    展开全文
  • 文件导出FileSaver.js

    2019-03-02 09:56:05
    用来把文件下载保存到本地的。需要的人自然会懂
  • js 前端 导出 CSV DOC JSON PDF PNG SQL TSV TXT XLS XLSX XML多种文件
  • JS导出文件

    千次阅读 2015-04-14 20:56:17
    对于js导出文件,在IE里可以借助ActiveXObject这个对象来保存,IE本来就是微软的东西,所以这个很正常。但是对于其他浏览器这就是个麻烦事。经过网上的一些资料和自己的一些尝试找到了FileSaver.js,使用起来很方便...
  • JS导出CSV文件

    千次阅读 2019-01-23 10:30:00
    JS将数据导出为csv文件格式
  • js 导出中文pdf文件

    2018-04-25 14:55:17
    js 导出中文pdf文件 demo,包含导出中文的案例,vfs_fonts.js和pdfmake.min.js 生成pdf文件
  • FileSaver.js 实现浏览器文件导出 在浏览器中用 FileSaver.js 可以下载文件,不会造成文件直接打开等情况 转载于:https://www.cnblogs.com/sdya/p/10618988.html
  • js 导出 txt 文件

    2019-12-07 14:28:14
    之前有写过一篇js 导出 csv 文件的,现在需求上要求导出 txt 文件,还要导出成指定的格式,只能再次研究下。 先贴下这个项目导出 csv 的处理: let rstList = []; let csvList = []; data.list.forEach((item, ...
  • js导出excel文件

    千次阅读 2019-06-26 16:48:26
    js导出excel文件 这里介绍一种前端导出excel表格的方法,感觉非常简单实用,直接贴代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导出excel实例&...
  • Vue导出excel必备js文件

    2018-02-03 20:27:49
    blob与Export2Excell.这两个文件是Vue导出excel必备js文件
  • 1、通过创建a标签,实现下载功能 ... 参考地址:https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/ 转载于:https://www.cnblogs.com/phermis/p/11393144.html
  • 导出文件原生js方法

    2018-11-06 15:08:21
    let httpUrl  if(pushname == 'luohui'){ httpUrl = BASE_URL+'/loan/zxLhpingan/exportExcel'//所需url } else if(pushname == 'kunxuan'){ httpUrl = BASE_URL+'/loan/zxKxpingan/exportExcel'...} var xhr = n...
  • 1、服务器生产文件,返回url供前端下载 2、服务器返回二进制字节数组(window.open(),URL.createdObjectUR()) 3、前端插件(原理都一样,必须是blob或base64)如:Export2Excel 4、服务器返回json对象,前端blob...
  • excel导出js.rar

    2020-07-18 11:23:11
    vue中插件使用xlsx导入导出excel文件所需要的js文件包Export2Excel和Export2Zip
  • js导出csv文件

    2019-04-18 21:57:21
    js导出cvs文件 用到了json2csv依赖包,首先安装依赖 npm install json2csv --save const { Parser } = require('json2csv'); /** * @param {String} fields[表头] * @param {String} data[导出的json数据] * @...
  • vue导出Excel表的js文件

    2020-12-28 15:33:02
    vue导出Excel表的js文件
  • js 导出文件

    2016-12-06 18:28:06
    function downloadFile(fileName, content){  var aLink = document.createElement('a');  var blob = new Blob([content]);  var evt = document.createEvent("HTMLEvents");... evt.initEvent

空空如也

空空如也

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

文件导出js