vue 列表导出为Exacl表格

2022-06-24 19:02:30 阅读：272 来源： 互联网

标签：vue Exacl 表格 url param fileName api link data

实现功能：点击列表数据，导出点击内容。不选择列表内容导出全部

新建一个manage.js文件，具体内容

import Vue from 'vue'
import { axios } from '@/utils/request'

//api自定义
const api = {
  user: '/api/user',
  role: '/api/role',
  service: '/api/service',
  permission: '/api/permission',
  permissionNoPager: '/api/permission/no-pager'
}

export default api/**
 * 下载文件 用于excel导出
 * @param url
 * @param parameter
 * @returns {*}
 */
export function downFile(url,parameter){
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob'
  })
}

/**
 * 下载文件
 * @param url 文件路径
 * @param fileName 文件名
 * @param parameter
 * @returns {*}
 */
export function downloadFile(url, fileName, parameter) {
  return downFile(url, parameter).then((data) => {
    if (!data || data.size === 0) {
      Vue.prototype['$message'].warning('文件下载失败')
      return
    }
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      window.navigator.msSaveBlob(new Blob([data]), fileName)
    } else {
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象
    }
  })
}

导入接口：

import { downFile } from '@/api/manage'

导出按钮：

   <a-button type="primary" ghost @click="handleExportXls('访客明细表统计')"> 导出 </a-button>

table列表：

 <a-table 
     ref="table" 
     size="middle" 
     :scroll="{ x: true }" 
     rowKey="id" 
     :columns="columns"
     :dataSource="dataSource"
     :pagination="ipagination" 
     :loading="loading"
     :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
     @change="handleTableChange">

</a-table>

data声明变量：

  data() {
    return {// 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '创建日期',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '机构名称',
          align: 'center',
          dataIndex: 'visitorCompany_dictText',
        },
        {
          title: '访客姓名',
          align: 'center',
          dataIndex: 'visitorName',
        },
        {
          title: '联系电话',
          align: 'center',
          dataIndex: 'phoneNum',
        },
        {
          title: '接待人',
          align: 'center',
          dataIndex: 'recePeople',
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
        },
      ],
      url: {
        list: '/visitor/tbLocVisitor/visitorDetailList',
        exportXlsUrl: '/visitor/tbLocVisitor/exportVisitorDetail',
      },
     
      selectedRowKeys: [],
      selectionRows: [],

    }
  },

方法：

  //点击列表，通过获取list的id 用ids拼接
   onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
   //导出
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != "string") {
        fileName = "导出文件"
      }
      let param = { ...this.queryParam };
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['ids'] = this.selectedRowKeys.join(",")
      }
      console.log("导出参数", param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    },

标签：vue,Exacl,表格,url,param,fileName,api,link,data
来源： https://www.cnblogs.com/sunqiaozhen/p/16409973.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 列表导出为Exacl表格