亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

element-ui上傳下載excel（超詳細der）

Jeffrrey / 2898人閱讀

摘要：上傳組件點擊跳轉(zhuǎn)到該組件官方文檔用到的組件參數(shù)參數(shù)說明類型可選默認值必選參數(shù)，上傳的地址上傳的文件列表接受上傳的文件類型覆蓋默認的上傳行為最大允許上傳個數(shù)文件超出個數(shù)限制時的鉤子

1. 上傳 EXCEL Upload組件 點擊跳轉(zhuǎn)到該組件官方文檔 
用到的upload組件參數(shù)
參數(shù) 說明 類型 可選 默認值
action 必選參數(shù)，上傳的地址 string --- ---
file-list 上傳的文件列表 array --- []
accept 接受上傳的文件類型 string --- ---
http-request 覆蓋默認的上傳行為 function --- ---
limit 最大允許上傳個數(shù) number --- ---
on-exceed 文件超出個數(shù)限制時的鉤子 function(files, fileList) --- --- 
組件代碼
html

--說明--
style: 按項目需要添加，請按需保留
action：必需，自定義上傳直接給空串；非自定義，將地址賦給action配合屬性headers、on-success、on-error等
http-request：自定義方法，根據(jù)請求的響應手動實現(xiàn)on-success、on-error
file-list：本項目有清空需要【代碼略】
ref：該上傳組件放置dialog中，本項目有置空需求【代碼略】，請按需保留

js 
import HTTP_API from "@/httpApi" //  封裝好的axios:get post請求（含headers和攔截器等【代碼略】）

// methods
fileExceed () {
  this.$message.error("別貪心！一次只能上傳一個哦~");
},

  // 請求成功
importSuccess (res) {
    // 后端的返回碼--上傳成功
  if (res.code == xxxxx) {
    // 顯示√圖標
    let e = document.getElementsByClassName("el-upload-list__item-status-label");
    e[0].setAttribute("style", "display:block !important")
    // 成功提示
    this.$message.success("上傳成功");
    // 重新調(diào)用列表請求（代碼略）
    this.getList();
    // 后端的返回碼--上傳失敗
  } else {
    // 隱藏√圖標
    let e = document.getElementsByClassName("el-upload-list__item-status-label");
    e[0].setAttribute("style", "display:none !important")
    // 失敗提示--及后端返回的失敗詳情
    this.$message.error({
      dangerouslyUseHTMLString: true,
      duration: 4500,
      message: res.remark+",
請刪除上傳失敗的文件，修改后重新上傳"
    });
  }
},

  // 請求失敗
importError (err) {
  this.$message.error({
    dangerouslyUseHTMLString: true,
    duration: 4500,
    message: "上傳出現(xiàn)異常，請稍后重試"+",

異常原因："+err
  });
},

  // 自定義上傳
uploadFile (item) {
  const form = new FormData()
  form.append("file", item.file)
  HTTP_API.xlsx_upload(form).then(res => {
    this.importSuccess(res)
  }).catch(err => {
    this.importError(err)
  })
}
2. 下載 EXCEL（遠程地址/文檔流） button組件 
組件代碼
html 
下載模板
js--后端返回下載地址 
import axios from "axios"

// methods
// 導出模板
downTemplate () {
  axios({
    method: "get",
    url:"xxx相對地址xxx",
    responseType: "blob"
  }).then(res => this.downloads(res.data, res.headers.filename))
},

// 創(chuàng)建模板下載鏈接
downloads (data, name){
  if(!data){
    return
  }
  let url = window.URL.createObjectURL(new Blob([data]))
  let link = document.createElement("a")
  link.style.display ="none"
  link.href = url
  link.setAttribute("download", `前端拼接后端返回的名字${name}.xlsx`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
},
js--后端返回文檔流 
import HTTP_API from "@/httpApi" //  封裝好的axios:get post請求（含headers和攔截器等【代碼略】）

// methods
// 導出excel
let selectedParams = {
  ids : this.idList.join(",")    //導出條件（按照選中的ID來導出，按實際需求）
}
// 解決文檔流亂碼問題設置響應類型
HTTP_API.exportSelected(selectedParams, {responseType: "arraybuffer"}).then(res => {
  let url = window.URL.createObjectURL(new Blob([res], {type: "application/vnd.ms-excel;charset=UTF-8"}))
  let link = document.createElement("a")
  link.style.display ="none"
  link.href = url
  link.setAttribute("download", "記錄列表.xls")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
});
3. 結束語

上傳action必須有，空串也好，隨便寫點也行，反正得有

element的提示允許html代碼，但是要設置dangerouslyUseHTMLString為true

上傳的請求成功（狀態(tài)碼200）不等于上傳成功，element的√圖標，需要用js實現(xiàn)顯示隱藏

下載時文件名稱為動態(tài)時，請求后端協(xié)助在響應的頭部增加filename字段（filename字段中含文字會有問題，后端給我日期數(shù)字，相同的文字部分前端拼接）

responseType設置為blob或者arraybuffer從結果上是一樣的。點擊跳轉(zhuǎn)responseType文檔

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101618.html

相關文章

  • 如何在 Laravel 項目中處理 Excel 文件

    摘要：本文經(jīng)授權轉(zhuǎn)自社區(qū)說明是一款強大的文件處理擴展包能夠快速完成文件的的導出解析等功能本項目由團隊成員整理發(fā)布首發(fā)地為社區(qū)文章的項目截圖運行代碼請見請參照此文檔運行文章概覽安裝基礎用法更多功能接下來是詳細解說安裝使用安裝該擴展包安裝完成后， 本文經(jīng)授權轉(zhuǎn)自 PHPHub 社區(qū) 說明 maatwebsite/excel 是一款強大的 Excel 文件處理擴展包, 能夠快速完成 Excel 文...

    chadLi 評論0 收藏0

  • element-ui 導出excel

    摘要：導出項目簡介插件使用保存文件電子表格解析器安裝使用以示例給定引入插件新增方法錯誤處理方式新增點擊事件瀏覽器會下載問題導出時間格式轉(zhuǎn)換解決方案 element-ui 導出excel 項目簡介 vue + elementUi 插件使用 Project Description file-saver 保存文件 xlsx 電子表格解析器 安裝 npm install ...

    鄒強 評論0 收藏0

  • vue導入處理Excel表格功能步驟實例

    　　1. 前言　　本篇文章就是為大家講講前端導入并處理excel表格的情況，順便講講vue導入并處理excel數(shù)據(jù)；也總結下使用工具。　　2.vue導入Excel表格　　vue導入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹；　　2.1 使用ElementUI中的upload組件　　安裝Eleme...

    3403771864 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<