zoukankan      html  css  js  c++  java
  • iview 导出文件(txt)

    111

    1、定义导出文件按钮
    <Button :size="buttonSize" type="text" icon="ios-print-outline" @click="exportData">导出TXT </Button>
    2、我这里是模态框 为了选择导出指定的数据 <Modal title="提示框" v-model="modalConfirm" @on-cancel="modalConfirm = false" @on-ok="doExportTxt" class-name="vertical-center-modal"> <h3 style=" margin-left: 10px; margin-bottom: 10px; ">请选择要导出的版本</h3> <RadioGroup v-model="preferVersion" size="large"> <Radio v-for="item in version" :label="'版本号为:'+item.preferVersion" :value="item.preferVersion" ></Radio> <a :href="txtUrl" ref="downloadBtn" :download="txtName" style="display: none;">下载</a> </RadioGroup> </Modal>

    3、定义js中的变量
    export default {
    data() {
    return {
    txtUrl:null,
    txtName:null,
    preferVersion:null,
    version:[],
    versionList:[],
    modalConfirm:false,
    }
    4、在methods方法内加入
    exportData() {
    let me = this
    axios.request({
    method: 'post',
    url: '/feenormaldiscount/version',
    data: {}
    }).then(function (response) {
    me.version=response.data;
    me.modalConfirm=true
    })
    },
    doExportTxt(){
    let me = this
    axios.request({
    method: 'post',
    url: '/feenormaldiscount/exportversion',
    data: {
    preferVersion:me.preferVersion
    }
    }).then(function (response) {
    let versionList=response.data;
    if(versionList.length==0){
    me.$Message.warning('暂无数据!');
    return false;
    }
    var title=Object.keys(versionList[0]).join(",")+" ";
    var txtContext="";
    for(var i=0;i<versionList.length;i++){
    txtContext+=Object.values(versionList[i]).join(",")+" ";
    }
    var elHtml = title+txtContext;
    var mimeType = 'text/plain';
    me.txtName="Fee_Normal_Discount.txt"
    me.txtUrl='data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml);
    me.$nextTick(_ => me.$refs.downloadBtn.click())
    })
    }
      
  • 相关阅读:
    WordPress The Plus Addons for Elementor插件身份验证绕过漏洞复现分析
    ThinkPHP 5日志文件包含trick
    JavaScript对称数字金字塔(机考)
    css绘制三角箭头
    element-ui table 多列数据动态排序(前后台交互)
    Animate.css
    Normalize.css
    CMake笔记
    时间对齐——用 FFT 加速互相关
    g2o 代码学习—— exp map and log map for SE(3), SIM(3)
  • 原文地址:https://www.cnblogs.com/wcnwcn/p/11497722.html
Copyright © 2011-2022 走看看