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(",")+"\n";
          var txtContext="";
          for(var i=0;i<versionList.length;i++){
            txtContext+=Object.values(versionList[i]).join(",")+"\n";
          }
          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())
        })
      }