涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万,但我这种是可以兼容客户端的方法(亲测之前的方法在客户端会有bug),经过不断优化在客户端也得到很好的效果。我这里的需求是:点击导出调起后端的api,返回下载文件的url,前端根据url地址创建下载的iframe。下面看使用:
comm.js
export default {
// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
install: function(Vue) {
//创建个全局的$derive方法
Vue.prototype.$derive = function (url) {
let div = document.createElement("div");
div.style.display = 'none';
//生成隐藏的iframe标签
div.innerHTML = '<iframe id="idFrame" name="idFrame" src="' + url + '" height = "0" width = "0" frameborder="0" scrolling="auto" style = "display:none;visibility:hidden" ></iframe>';
document.body.appendChild(div)
setTimeout(function () {
document.body.removeChild(div)
}, 30000)
}
}
使用
handleExportPort() {
this.$api.commonExport(this.paramsObj).then(res => {
if (res.data.appCode == '0000') {
//res.dataa.data就是后端返回的地址
this.$derive(res.data.data)
} else {
this.$Message('error', '导出失败!')
}
})
}