精华内容
下载资源
问答
  • 前端导出PDF文件.zip

    2020-06-30 19:56:36
    只要你懂一点前端,就能轻松实现,对比目前后端输出PDF的功能非常复杂和维护成本极高 Demo实现功能 功能 支持 页头 是 页脚 是 页码 是 图片是 超链接 是 自定义文件名 是 每页水印 是(可实现,demo未提供) ——...
  • Vue+element 前端导出Excel功能工具包,很好用!!!! Export2Excel.js、Blob.js实现将数据导出为表格的形式
  • js前端导出table到excel

    2019-03-07 16:11:59
    这是一个前端通过js导出页面的table生成并下载excel的demo
  • js前端导出xlsx文件内容,并展示到页面上,可以将解析的数据转为常用的数组或obj格式传给后台
  • 全网最新最详细的前端导出、使用jq+jsp框架导出elementui表格到excel,适合vue或jq框架
  • 前端导出 xlsx文件

    千次阅读 2021-07-03 22:28:01
    在前端开发中, 我们经常遇到产品提出过分的要求, 比如: 前端导出xlsx。。。。 没办法接到就要干 基于代码库如下: npm i cnpm i xlsx-style 具体代码如下 <!DOCTYPE html> <html> <head> &...

    在前端开发中, 我们经常遇到产品提出过分的要求, 比如: 前端导出xlsx。。。。

    没办法接到就要干

    基于代码库如下:

    npm i cnpm i xlsx-style

    具体代码如下

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>导出</title>
      <script src="./js/xlsx.full.min.js"></script>
    </head>
    
    <body>
      <button onclick=" dow(jsono)">下载</button>
    
      <a href="" download="这里是下载的文件名.xlsx" id="hf"></a>
      <script>
        var jsono = [{ //测试数据
          "保质期临期预警(天)": "adventLifecycle",
          "商品标题": "title",
          "建议零售价": "defaultPrice",
          "高(cm)": "height",
          "商品描述": "Description",
          "保质期禁售(天)": "lockupLifecycle",
          "商品名称": "skuName",
          "商品简介": "brief",
          "宽(cm)": "width",
          "阿达": "asdz",
          "货号": "goodsNo",
          "商品条码": "skuNo",
          "商品品牌": "brand",
          "净容积(cm^3)": "netVolume",
          "是否保质期管理": "isShelfLifeMgmt",
          "是否串号管理": "isSNMgmt",
          "商品颜色": "color",
          "尺码": "size",
          "是否批次管理": "isBatchMgmt",
          "商品编号": "skuCode",
          "商品简称": "shortName",
          "毛重(g)": "grossWeight",
          "长(cm)": "length",
          "英文名称": "englishName",
          "净重(g)": "netWeight",
          "商品分类": "categoryId",
          "这里超过了": 1111.0,
          "保质期(天)": "expDate"
        }, { //测试数据
          "保质期临期预警(天)": "adventLifecycle",
          "商品标题": "title",
          "建议零售价": "defaultPrice",
          "高(cm)": "height",
          "商品描述": "Description",
          "保质期禁售(天)": "lockupLifecycle",
          "商品名称": "skuName",
          "商品简介": "brief",
          "宽(cm)": "width",
          "阿达": "asdz",
          "货号": "goodsNo",
          "商品条码": "skuNo",
          "商品品牌": "brand",
          "净容积(cm^3)": "netVolume",
          "是否保质期管理": "isShelfLifeMgmt",
          "是否串号管理": "isSNMgmt",
          "商品颜色": "color",
          "尺码": "size",
          "是否批次管理": "isBatchMgmt",
          "商品编号": "skuCode",
          "商品简称": "shortName",
          "毛重(g)": "grossWeight",
          "长(cm)": "length",
          "英文名称": "englishName",
          "净重(g)": "netWeight",
          "商品分类": "categoryId",
          "这里超过了": 1111.0,
          "保质期(天)": "expDate"
        }];
    
    
        function dow(data, type = "xlsx") {
          // 00- 处理数据
          // 获取kes
          let keys = Object.keys(data[0]);
          // 创建第一列 列标题
          data.unshift({});
          keys.forEach(keyNmame => {
            data[0][keyNmame] = keyNmame;
          })
          // 00-1 处理数据方法 混合方法
          let tmpdata = {};
          data.map((v, i) => keys.map((k, j) => ({
            v: v[k],
            position: mygetCharCol(j + 1) + (i + 1) // 定位具体单元格
          }))).reduce((p, n) => {
            return p.concat(n);
          }).forEach((item, index) => {
            tmpdata[item.position] = { v: item.v }
          })
    
          // 01- 设置区域 还是属于处理数据
          // var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
          var tmpWB = {
            SheetNames: ['mySheet'], //保存的表标题
            Sheets: {
              'mySheet': Object.assign({},
                tmpdata, //内容
                {
                  '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域 范围
                })
            }
          };
    
          // 02- 转字节流 //创建二进制对象写入转换好的字节流
          tmpDown = new Blob([s2ab(XLSX.write(tmpWB,
            { bookType: type, bookSST: false, type: 'binary' }//这里的数据是用来定义导出的格式类型
          ))], {
            type: ""
          });
    
          // 03- 下载
          
          var href = URL.createObjectURL(tmpDown); //创建对象超链接
          document.getElementById("hf").href = href; //绑定a标签
          document.getElementById("hf").click(); //模拟点击实现下载
          setTimeout(function () { //延时释放
            URL.revokeObjectURL(tmpDown); //用URL.revokeObjectURL()来释放这个object URL
          }, 100);
        }
        // dow(jsono);
    
        /**
         * 将数字十进制, 转成xlsx的横向坐标
         * 将指定的自然数转换为26进制表示。映射关系:[1-26] -> [A-Z]。
         * */
        function mygetCharCol(n) {
          let str = '', m = 0;
          if (n <= 26) {
            str = String.fromCharCode(64 + n); // 1-26  =>  A-Z
          } else {
            // 底层逻辑
            // str = String.fromCharCode(64 + x) + String.fromCharCode(64 + m);
            while (n > 0) {
              m = n % 26;
              str = String.fromCharCode(64 + m) + str;
              n = (n - m) / 26; // n 的结果就是 多少个n的倍数
            }
          }
          return str
        };
    
        /**
         * 字符串转字符流
         * */
        function s2ab(s) {
          var buf = new ArrayBuffer(s.length);
          var view = new Uint8Array(buf);
          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
          return buf;
        };
      </script>
    </body>
    </html>
    

    最后

    如果实在还不行的话就用我 封装好的api

    包的地址如下https://download.csdn.net/download/dwp_wz/20031674

    展开全文
  • 前端导出excel

    2015-12-21 10:54:45
    前端导出Excel,不用在后台处理,通过要导出的信息在界面显示,既可以通过js导出Excel。很实用
  • js前端导出Excel的方法

    2020-11-27 04:13:57
    要是网上找的前端导出,既然是前端导出又是报表就需要有数据,所以数据都需要你提前做好相应填充 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>...
  • 前端导出excel表格, 前端导出下载文件, 用new Blob()导出文件, 前端导出文件乱码解决

    导出文件的过程

    前端发请求, 后端处理后返回文件流, 前端通过Blob解析并下载

    实现过程:

    前端发请求

    需要将响应类型更改为 arraybufferblob
    不设置响应类型会导致下载的文件看起来乱码
    解决前端导出文件乱码(设置响应类型)
    responseType: 'arraybuffer'responseType: 'blob'
    以常用的请求库axios为例(有可能你的项目对 axios 进行了二次封装, 你需要找到 options 来配置 )

    get请求写法

    axios.get(url, {
      params: form,
      responseType: 'arraybuffer'
      // responseType: 'blob'
    })
    

    post请求写法

    axios.post(url, params, {
      responseType: 'arraybuffer'
      // responseType: 'blob'
    })
    

    后端处理返回文件流

    在这里插入图片描述

    前端通过Blob对象解析并下载

    文件名和文件类型建议用后端返回的数据, 一般会放在响应头

    在这里插入图片描述
    文件名和类型的信息存放在 content-dispositioncontent-type

    文件名为中文的时候, 后端一般会转码前端可以使用decodeURIComponent解码
    解析并下载
    按照上图返回的结构, 以axios为例处理, res为请求成功后后端返回数据的参数
    let filename = decodeURIComponent(
    	res.headers['content-disposition'].split(';')[1].split('=')[1]
    )
    // let filename = '导出表格.xlsx' // 可以, 但不建议直接写文件名
    let fileType = decodeURIComponent(res.headers['content-type'])
    let blob = new Blob([res.data], {
        type: fileType
        // type: 'application/vnd.ms-excel' // 特殊情况下直接写文件的MIME类型
    })
    let url = window.URL.createObjectURL(blob)
    // 创建一个临时的url指向blob对象
    // 创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
    let a = document.createElement('a')
    a.href = url
    a.download = filename
    // 下载
    a.click()
    // 释放这个临时的对象url
    window.URL.revokeObjectURL(url)
    

    注意

    1. filename 可以直接赋值一个字符串包含文件后缀名, 例如: ('导出表格.xlsx'), 但建议从响应头取
    2. new Blob() 的第一个参数为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers , 不一定是 [res.data] , 也可能是 [res.body] 或其它, 具体根据后端的返回来写
    3. new Blob() 的第二个参数用于指定将要放入 Blob 中的数据的类型 (MIME) , 大多数情况从响应头取, 但是后端返回 ( content-type: application/octet-stream 是默认的未知的类型, 除非你知道具体是什么类型,否则解析不出来 ) 的时候需要自己手动设置 MIME 类型。 例如: Excel 表需设置成 { type: 'application/vnd.ms-excel' }

    多种文件类型的MIME类型参考点击此处

    展开全文
  • 一般来讲导出都是后端完成逻辑,给接口给到前端,前端调用接口简单处理导出就可以了,但是上次我们公司做内部使用的后台,认为数据量小,前端导出实时更快,于是也有了前端导出的方式,做个总结。 先过一下后端导出...

    一般来讲导出都是后端完成逻辑,给接口给到前端,前端调用接口简单处理导出就可以了,但是上次我们公司做内部使用的后台,认为数据量小,前端导出实时更快,于是也有了前端导出的方式,做个总结。

    先过一下后端导出的做法以及需要注意的一些点:

    //我是事先封装了一个请求的方法,然后是正常的请求,只是需要注意的是要加一个responseType: 'blob',因为后端返回的就是一个blob类型
    export function getDetailExcel (params) {
      return request({
        url: '/detailExcel',
        method: 'get',
        responseType: 'blob',
        params
      })
    }
    
    getDetailExcel(this.detailExcelQueryData).then(data => {
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute(
        'download',
        `用户数据.xls`
      )
      document.body.appendChild(link)
      link.click()
    })
    

    前端导出的话我是通过调用查询接口,拼接数据然后导出:

    // 导出数据
        exportDataFe () {
          // const tipText = this.textFormat()
          this.$confirm(`确定导出数据吗?`, '提示', {
            confirmButt·onText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false
          }).then(() => {
            this.requestTimes = 0
            this.excelCount = 1
            this.exportList = []
            this.exporting = true
            const query = Object.assign({}, this.exportReuqireData)
            query.pageIndex = 0
            query.pageSize = this.requestSize
            getWxusers(query)
              .then((res) => {
                if (res.total <= this.requestSize) {
                  this.exportList = this.formatJson(res.users)
                  this.exportExcel()
                } else {
                  let total = res.total
                  if (res.total > this.maxSize) {
                    total = this.maxSize
                    this.$message({
                      message: '单次最多可下载10万条数据',
                      duration: 5000,
                      type: 'warning'
                    })
                  }
    
                  // 先判断有多少个文件
                  this.excelCount = Math.ceil(total / this.excelSize)
                  if (this.excelCount > 1) {
                    this.requestTimes = Math.ceil(
                      (total - (this.excelCount - 1) * this.excelSize) /
                        this.requestSize
                    )
                    for (let k = 0; k < this.excelCount - 1; k++) {
                      this.combinedData(10, k)
                    }
                    this.combinedData(this.requestTimes, this.excelCount - 1)
                  } else {
                    this.requestTimes = Math.ceil(total / this.requestSize)
                    this.combinedData(this.requestTimes)
                  }
                }
              })
              .catch(() => {
                this.exporting = false
              })
          })
        },
    
        combinedData (requestTimes, fileOrder) {
          const alOrder = fileOrder || 0
          let allRequest = []
          for (var i = 0; i < requestTimes; i++) {
            const query = Object.assign({}, this.exportReuqireData)
            query.pageSize = this.requestSize
            query.pageIndex = i * query.pageSize + alOrder * this.excelSize
            allRequest.push([i, query])
          }
          allRequest = allRequest.map((item, index) => {
            return getWxusers(item[1])
          })
          Promise.all(allRequest).then((values) => {
            values.forEach((item) => {
              const list = this.formatJson(item.users)
              this.exportList = this.exportList.concat(list)
            })
            let order
            if (fileOrder === undefined) {
              order = 0
            } else {
              order = ++fileOrder
            }
            this.exportExcel(order)
            this.excelCount = this.excelCount - 1
          })
        },
    
        // 下载表格
        exportExcel (fileOrder) {
          import('@/vendor/Export2Excel').then((excel) => {
            // const fileText = this.textFormat()
            const tHeader = [
              'Id',
              '手机号',
              '学生姓名',
              '学校名称',
              '学校id',
              '会员等级',
              '会员激活时间',
              '会员到期时间',
              '省份',
              '高中所在学校'
            ]
            const data = this.exportList
            // const fileName = `AI升学宝用户${fileText}数据` + (fileOrder ? '(' + fileOrder + ')' : '')
            const fileName =
              `AI升学宝用户数据` + (fileOrder ? '(' + fileOrder + ')' : '')
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: fileName,
              autoWidth: true,
              bookType: 'xlsx'
            })
            this.downloadLoading = false
            this.exportList = []
            this.exporting = false
            this.$message({
              message: '用户数据已导出',
              duration: 5000,
              type: 'success'
            })
          })
        },
    
    展开全文
  • 一个导出excel的demo,包含导出的逻辑代码和依赖包,下载以后请执行 npm install ,然后起服务访问,不能直接以 file://打开哦
  • 之前写过一篇关于纯前端导出excel的文章 但是之前用的那个依赖不兼容ie 现在重新发表一个兼容ie的; 1.安装依赖npm install xlsx 2引用公共方法 ,方法已经封装,直接禁用即可, 公共方法 /** * 纯前端导出Excel...

    之前写过一篇关于纯前端导出excel的文章 但是之前用的那个依赖不兼容ie 现在重新发表一个兼容ie的;

    1.安装依赖  npm install xlsx

    2引用公共方法 ,方法已经封装,直接禁用即可,

    公共方法

    /**
     * 纯前端导出Excel工具
     */
    import * as XLSX from "xlsx";
    import {saveAs} from '@progress/kendo-file-saver';
    
    export function formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    }
    
    function s2ab(s) {
        let buf = new ArrayBuffer(s.length)
        let view = new Uint8Array(buf)
        for (let i = 0; i !== s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xFF
        }
        return buf
    }
    
    function data2ws(data) {
        const ws = {}
        const range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}}
        for (let R = 0; R !== data.length; ++R) {
            for (let C = 0; C !== data[R].length; ++C) {
                if (range.s.r > R) range.s.r = R
                if (range.s.c > C) range.s.c = C
                if (range.e.r < R) range.e.r = R
                if (range.e.c < C) range.e.c = C
                const cell = {v: data[R][C]}
                if (cell.v == null) continue
                const cellRef = XLSX.utils.encode_cell({c: C, r: R})
                if (typeof cell.v === 'number') cell.t = 'n'
                else if (typeof cell.v === 'boolean') cell.t = 'b'
                else if (cell.v instanceof Date) {
                    cell.t = 'n'
                    cell.z = XLSX.SSF._table[14]
                } else {
                    cell.t = 's'
                }
                ws[cellRef] = cell
            }
        }
        if (range.s.c < 10000000) {
            ws['!ref'] = XLSX.utils.encode_range(range)
        }
        return ws
    }
    
    function Workbook() {
        if (!(this instanceof Workbook)) {
            return new Workbook()
        }
        this.SheetNames = []
        this.Sheets = {}
    }
    
    /*
    * th => 表头
    * data => 数据
    * fileName => 文件名
    * fileType => 文件类型
    * sheetName => sheet页名
    */
    
    //导出封装好的方法
    export function toExcel({th, data, fileName, fileType, sheetName}) {
        data.unshift(th)
        const wb = new Workbook()
        const ws = data2ws(data)
        sheetName = sheetName || 'sheet1'
        wb.SheetNames.push(sheetName)
        wb.Sheets[sheetName] = ws
        fileType = fileType || 'xlsx'
        var wbout = XLSX.write(wb, {bookType: fileType, bookSST: false, type: 'binary'})
        fileName = fileName || '列表'
        saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), `${fileName}.${fileType}`)
    }
    

    如何引用:

     downloadData = () => {
            let {chooseData, searchValue} = this.state;
            if(chooseData.length === 0) {
                message.warning('无数据可导出');
                return;
            }
            const th = ["行号", "物料代码", "物料描述", "计量单位", "价格单位", "合同可用余额", "采购申请号", "含税单价", "行数量", "行未下单数量", "订单数量", "合同创建人", "销售人员", "计价方式", "采购申请行号", "WBS", ];
            const filterVal = ["contractLineNumNew", "materialCode", "materialRemark", "measureUnitName", "priceUnit", "availabMoney", "purchaseApplyNumber", "purchasePriceInclusive", "amount", "unorderCount", "orderCount", "creatorName", "employeeName", "valMethodName", "purchaseApplyLineNumber", "wbsNo", ];
            const data = formatJson(filterVal, chooseData);
            toExcel({th, data, fileName: `${searchValue.contractCode} 合同数据`, fileType: "xlsx", sheetName: `${searchValue.contractCode} 合同数据`})
        };

    这里面chooseData就是table的数据,各位仿照这个使用即可

    展开全文
  • 1.前端导出,不需要调用后台接口后台导出,前端直接实现导出功能 导出table数据 js 引入 importFileSaverfrom"file-saver"; importXLSXfrom"xlsx"; table idout-table <el-table v-loading="data...
  • 前端导出word实现方法

    2021-05-20 15:06:17
    前端导出word方法 npm i docxtemplater jszip-utils file-saver jszip@2.6.1 import Docxtemplater from 'docxtemplater' import JSZipUtils from 'jszip-utils' import { saveAs } from 'file-saver' import JSZip...
  • Vue-纯前端导出word文档

    千次阅读 2019-12-23 10:11:26
    本文将介绍如何在前端纯js实现word文档导出。 docxtemplater docxtemplater 使用 JSON 数据格式作为输入,可以处理docx 和 ppt模板。不像一些其它的工具,比如 docx.js, docx4j, python-docx 等,需要自己编写...
  • 前端导出word文档

    千次阅读 2019-09-29 12:07:05
    <title>WEB页面导出为Word文档后分页的方法 <h2>hahha ^ bbb ^ ccc <h2>hahha bbb ccc 导出页面指定区域内容到Word"/> /**//* * * @param {Object} cont 要导出的html元素内容的id...
  • 场景 ...数据表格导出是在常见不过的功能模块。在数据量比较小的时候,我们可以随便搞,直接设置header头,输出csv也是可以的。...所以很自然的想到,那能不能把文件下载/导出/保存这个动作放到前端来...
  • 前端导出excel文件

    千次阅读 2019-05-28 13:45:41
    用到xlsx和file-saver库,xslx用以转换数据对象到Blob对象中,file-saver用以在客户端保存文件。 import { saveAs } from 'file-saver' import XLSX from 'xlsx' export const exportXlsx = (data, fields, ...
  • 前端导出excel表格

    2020-07-31 16:59:22
    原文参考
  • 3.根据后端数据导出excel,后端数据如: 4.导出函数 handleExportCurrentExcel = (ExcelData) => { //ExcelData为后端返回的data数组 let sheetFilter = ["ticketNo", "ticketAmount", "tic
  • 前端表格导出Excel

    2018-02-05 17:40:36
    前端表格数据导出为excel表格,导出的数据为表格显示数据,付代码,类
  • vue前端导出Excel.zip

    2021-05-22 17:09:11
    vue前端导出Excel.zip
  • SheetJS是用于多种电子表格格式的解析器和编写器。通过官方规范、相关文档以及测试文件实现简洁的JS方法。SheetJS强调解析和编写的稳健,其跨格式的特点和统一的JS规范兼容,并且ES3/ES5浏览器向后兼容IE6
  • 在之前写过一篇文博客【web导出百万数据的方案】,传送门,主要是解决大数据导出的问题 ,使用的是csv导出数据,业务反映csv导出的数据有很多问题。包括: **1:**某些符号被替换例如“,”,导出的数据不是原汁原味...
  • JS 前端导出CSV文件

    2020-02-19 14:51:32
    长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url。前端通过location.href = url或者window.open...
  • vue+elementui表格前端导出excel以及自定义导出样式

    千次阅读 多人点赞 2020-12-23 10:13:00
    vue+elementui表格前端导出excel以及自定义导出样式 项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊。可没想到导出竟然也要前端自己来弄,于是乎请教同事以及博客。学...
  • export1(){ axios.get(`/api/medical-live/logininfor/export`, { params: {}, contentType: 'application/json', cache: true, responseType: "blob" }).then((res) => { const link = document....
  • 前端导出PDF

    千次阅读 2019-03-21 10:29:39
    (2)pdfMake这种是采取数据的方式导出 文档: https://pdfmake.github.io/docs/document-definition-object/headers-footers/ 因为pdfMake不支持中文字体,固自己需要设置字体 //配置PDF的字体 //请求取本地...
  • 前端导出表格数据

    2020-04-13 11:36:28
    https://www.cnblogs.com/shenjp/p/11398232.html
  • 页面数据导出工具,通过tableExport 导出指定dable数据,可根据需求修改相关样式。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,394
精华内容 27,357
关键字:

前端导出