?? 1. 前端導(dǎo)出選中表格數(shù)據(jù)到本地成xlsx文件
//---- 導(dǎo)出表格到本地xlsx文件 ----
const webDerive = () => {
ElMessageBox.confirm("是否確認(rèn)導(dǎo)出選中數(shù)據(jù)?", "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
})
}
1. 安裝依賴
npm run xlsx
2. 引入，import * as XLSX from “xlsx”;
3. 報(bào)錯(cuò)找不到模塊“xlsx”或其相應(yīng)的類型聲明
修改成大寫就好了import * as XLSX from 'XLSX'，如果沒(méi)有報(bào)提示就直接用
4. 使用導(dǎo)出文件
//---- 導(dǎo)出表
格到本地xlsx文件 ----
const webDerive = () => {
ElMessageBox.confirm("是否確認(rèn)導(dǎo)出選中數(shù)據(jù)?", "警告", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//deleteDate 選中數(shù)據(jù)列表
let tableData = [
['序號(hào)', '時(shí)間', '姓名', '地址', '收件地址']//導(dǎo)出表頭
] // 表格表頭
deleteDate.forEach((item: any, index) => {
console.log(item, item.name)
let rowData = []
//導(dǎo)出內(nèi)容的字段
rowData = [
index + 1,
item.create_time,
item.name,
item.address
]
tableData.push(rowData)
})
let workSheet = XLSX.utils.aoa_to_sheet(tableData);
let bookNew = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名稱') // 工作簿名稱
let name = '全部人員'+ '.xlsx'
XLSX.writeFile(bookNew, name) // 保存的文件名
})
}
?? 2. 通過(guò)接口獲取文件流下載xlsx文件
1. 直接用a標(biāo)簽下載
//html
<a href="http://xxxxxxx:8082/file/down" class="download" id="aupload">a標(biāo)簽導(dǎo)出文件流 </a>
//css
.download {
display: inline-block;
padding: 2px 10px;
color: #409eff;
background-color: #ecf5ff;
border: 1px solid #52a4f6a4 !important;
border-radius: 4px;
text-decoration: none;
margin-left: 12px;
}
.download:hover {
color: #fff;
background-color: #409eff;
border: 1px solid #52a4f6a4 !important;
}
鼠標(biāo)移入樣式，點(diǎn)擊自動(dòng)下載
2. 有特殊數(shù)據(jù)需要解析文件流方式
* 定義請(qǐng)求方式，axios
responseType:'blob', //記得添加
* 下載文件流
//引入請(qǐng)求方法
import { download } from '../../api/upload'
//在自己方法中法請(qǐng)求
download().then(((res) => {
const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
let fname = '測(cè)試.pdf';
link.href = url;
link.setAttribute('download', fname);
document.body.appendChild(link);
link.click();
}))
?? 3. 如何獲取proxy對(duì)象中的值，以及‘ 提示不能將類型“xxx”分配給類型“xxx2” ’ 解決方案
1. 獲取Proxy(Object)中數(shù)據(jù)方法
使用vue3.0時(shí)，因?yàn)榈讓邮鞘褂胮roxy進(jìn)行代理的所以當(dāng)我們打印一些值得時(shí)候是proxy代理之后的是Proxy
對(duì)象，Proxy對(duì)象里邊的[[Target]]才是真實(shí)的對(duì)象。
-
就比如選中表格單條數(shù)據(jù)時(shí)候，直接打印proxy里面的值可能會(huì)報(bào)undefined
-
* 解決方法一：直接給item:any設(shè)置類型
下邊兩種事網(wǎng)上給的答案，目前在我這個(gè)場(chǎng)景感覺(jué)沒(méi)用。相同場(chǎng)景就不用看下邊了。
-
* 解決方法二：JSON.parse(JSON.stringify( ))
deleteDate.forEach((item) => {
let obj = JSON.parse(JSON.stringify(item))
console.log(obj, obj.name)
})
打印結(jié)果：
-
* 解決方法三：import { toRaw } from’@vue/reactivity’;
能打印出來(lái)，但是會(huì)有警告“類型“never”上不存在屬性“name”。所以還得加any，家里之后就沒(méi)有警告了。
2. 提示不能將類型“xxx”分配給類型“xxx2”解決方案
不能將類型“xxx”分配給類型“xxx2”。ts(2322)
(property) Ref<string>.value: string。
as 是 TypeScript 中的類型斷言操作符。它的作用是告訴 TypeScript
編譯器某個(gè)值的確切類型，并強(qiáng)制將該值視為指定的類型。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-612339.html類型斷言有兩種形式： 和 value as Type，在最新的 TypeScript 版本中，推薦使用 value as Type 的語(yǔ)法，因?yàn)樗c JSX 不會(huì)產(chǎn)生沖突。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-612339.html
1. 顯式類型轉(zhuǎn)換：當(dāng)你比 TypeScript 編譯器更了解某個(gè)變量的類型時(shí)，可以使用 as 來(lái)強(qiáng)制將其轉(zhuǎn)換為你指定的類型，這樣 TypeScript 不會(huì)給出類型檢查錯(cuò)誤。
let myVariable: any = "Hello";
let myNumber: number = myVariable as number; // 顯式將myVariable轉(zhuǎn)換為number類型
日常學(xué)習(xí)筆記，有路過(guò)的發(fā)現(xiàn)錯(cuò)誤希望能指出！??
到了這里，關(guān)于vue3+ts+element-plus實(shí)際開發(fā)之導(dǎo)出表格和不同類型之間相互賦值的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
