Vue 项目中关于文件下载实操记录

第三方下载依赖工具

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';
},