1. 程式人生 > 實用技巧 >vue 匯出功能

vue 匯出功能

按鈕:

<el-button type="primary" @click="exportBtn" class="ml20">匯出</el-button>

方法:先調介面

      exportBtn(){
        if(this.tableData.length === 0 ){
          this.$message.error('暫無資料,無法匯出')
        }else{
          let url = `/manage/business/activity/cdk/exchange/export`
          let pames = {
            page: 
this.pageNum, pageSize: this.pageSize, type: this.type } openForm(url, pames, "POST") } },

開啟方法:

/**
 * @method 建立一個表單並提交
 *  @param {String} url 提交的地址
 * @param {Object} params 提交的資料
 * @param {String} method 提交的方式
 */
export const openForm = (url, params
, method) => { const form = _createElement(({ tag: 'form', attr: { id: 'newsForm', name: 'newsForm', target: '_blank', method: method, action: url } })) Object.keys(params).forEach(item=>{ let input = document.createElement('input') input.type
= 'text' input.name = item input.value = params[item] form.appendChild(input) }) document.body.appendChild(form) form.submit() document.body.removeChild(form) }