第三方下载依赖工具
1. downloadjs
【安装】
npm install downloadjs
地址:https://www.npmjs.com/package/downloadjs
【使用】
// 引用
import download from "downloadjs";
<template>
<el-dialog title="合同附件管理" :visible.sync="dialogVisiable" @close="closeClilck">
<div class="card_info">
<el-table class="elTable" :header-cell-style="{ background: '#f3f6f9' }" border stripe style="width: 100%" :data="contractInfo" tooltip-effect="dark" >
<template v-for="(item, index) in table">
<el-table-column :label="item.label" :key="index" align="center" :width="item.width" show-overflow-tooltip >
<template slot-scope="scope">
<el-button icon="el-icon-download" class="bottom_one" v-show="item.label == '操作'" @click="downContract(scope.row)">下载</el-button>
<span class="cell" v-if=" item.label !== '操作'">{{ scope.row[item.prop] || '-' }}</span>
</template>
</el-table-column>
</template>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button class="bottom_all_two" style="margin-left: 10px;" @click="closeClilck">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import download from "downloadjs";
export default {
name: 'ContractFileDialog',
props: {
visible: {
type: Boolean,
default: false
},
contractInfo: []
},
computed: {
dialogVisiable: {
get () {
return this.visible
},
set (val) {
this.$emit('update:visible', val)
}
}
},
data() {
return {
table: [
{ label: "合同地址", width: "auto", prop: "url", status: true },
{ label: "操作", width: "auto", prop: "states", status: true }
],
}
},
methods: {
closeClilck(){
this.$emit('custom-click')
},
downContract(e){
console.log('地址' + JSON.stringify(e))
if(e.url){
download(e.url)
}
}
},
}
</script>
<style>
</style>
ElementUI - el-link
【使用】
// template
<el-link :underline="false" @click="Download()">
<i class="el-icon-upload2 el-icon--left"></i>
导出
</el-link>
// js
/*下载*/
Download() {
window.location.href = process.env.VUE_APP_API_APIHOST + '/system/base/thirdapp/export';
},