Vue导出url参数拼接

1,800 阅读1分钟

       在实际开发中,经常会遇到导出Excel之类的需求,一般都是后台直接给个接口,前端进行参数的拼接,点击拼接好的url打开新的窗口进行下载。但是,有时候会遇到有很多的参数,这样一来拼接起来可能密密麻麻,所以可以使用函数进行转换,传入对应的参数。

1.建一个工具js,例如:utils.js

var getParam = function(data) {    
  let url = '';    
  for (var k in data) {        
    let value = data[k] !== undefined ? data[k] : '';        
    url += `&${k}=${encodeURIComponent(value)}`    
  }    
  return url ? url.substring(1) : ''
}
//最终获取带参数的url方法
export function getExportUrl(url, data) {    
  //看原始url地址中开头是否带?,然后拼接处理好的参数    
  return url += (url.indexOf('?') < 0 ? '?' : '') + getParam(data)
}

2.在需要的页面进行引用

import { getExportUrl } from '@/utils';
// 导出表格
exportExecl() {  
  const params = {     
    account: this.account,
    type: this.type,
    ...(需要传入的参数)  
  };  
  const baseURL = process.env.VUE_APP_BASE_API + "/export/";    // 下载地址  
  window.open(getExportUrl(baseURL, params));   // 传入下载的接口地址和需要拼接的参数
}

如果有帮助给个赞呗!