――人生をどう過ごす？(人生をどう過ごすか)
--確かではありませんが、私は知っています、私はそれのすべての分を生きようとしています.
Sheet JS は以前の記事で使用されており、この記事でもこのプラグインを使用します。
[Vue プロジェクトの実践] Word ファイルと Excel ファイルのオンライン プレビューを実現_Xiaobai Rachel のブログ-CSDN ブログ_vue ワード プレビュー
【Vue仕事エッセイ】フロントエンドからバックエンドでファイルをダウンロードする方法の記録_Xiaobai Rachelのブログ - CSDNブログ_vueバックエンドからファイルをダウンロード
結果を示す：
ダウンロード付きのフォーム:
ダウンロードしたファイル
目次
1.依存関係と参照をインストールする
使用xlsx的时候也需要安装依赖
npm i xlsx -S
只需要在自己使用的那个vue页面引入即可
import XLSX from ‘xlsx’第二に、準備機能
これらは、Excel 構成を処理し、blob オブジェクトから bloburl を作成し、タグを使用してポップアップ ダウンロード ボックスを実現するために使用する必要がある 2 つの関数です。
変更せずに直接コピーして使用できます。
// 生成excel的配置
workbook2blob(workbook) {
// 生成excel的配置项
var wopts = {
// 要生成的文件类型
bookType: "xlsx",
// // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
bookSST: false,
type: "binary",
};
var wbout = XLSX.write(workbook, wopts);
// 将字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
let buf = s2ab(wbout);
var blob = new Blob([buf], {
type: "application/octet-stream",
});
return blob;
},
// 将blob对象 创建bloburl,然后用a标签实现弹出下载框
openDownloadDialog(blob, fileName) {
if (typeof blob === "object" && blob instanceof Blob) {
blob = URL.createObjectURL(blob); // 创建blob地址
}
var aLink = document.createElement("a");
aLink.href = blob;
// HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
aLink.download = fileName || "";
var event;
if (window.MouseEvent) event = new MouseEvent("click");
// 移动端
else {
event = document.createEvent("MouseEvents");
event.initMouseEvent(
"click",
true,
false,
window,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
null
);
}
aLink.dispatchEvent(event);
},3.ボタンエクスポート機能
<el-button type="primary" plain size="mini" @click="exportBtn">导出</el-button>このうち、ダウンロードしたファイルは枚数を設定でき、内容を直接編集することができます。これは、コメントの 2 つのテーブルを開くことで実現できます。もちろん、ダウンロードした表のエクセルデータも、ページの効果に合わせて動的に読み込むことができます。したがって、対応するフィールドを自分で変更する必要があります。
// xlsx的按钮点击事件
exportBtn() {
this.exportExcel();
},
// 生成excel数据
exportExcel() {
let temp = [];
// this.tableData.forEach((e) => {
// temp.push({
// // 序号: "1",
// 时间: e.date,
// 资源IP: e.resourceIP,
// 资源名称: e.resourceName,
// 运维人员: e.user,
// 操作: e.code,
// 文件名称: e.fileName,
// 风险归类:
// e.type == 1 ? "疑似涉政" : e.type == 2 ? "疑似涉军" : "疑似病毒",
// });
// });
// let sheet1data = temp;
let sheet1data = [
{
序号: "1",
时间: "2021.5.12 10:09:22",
资源IP: "192.168.50.116",
资源名称: "服务器1",
运维人员: "李四 - 公司1",
操作: "上传",
文件名称: "说明文件.txt",
风险归类: "疑似涉军",
},
{
序号: "2",
时间: "2022.3.12 15:09:22",
资源IP: "112.168.50.116",
资源名称: "服务器2",
运维人员: "张三 - 公司2",
操作: "上传",
文件名称: "说明文件.txt",
风险归类: "疑似涉政",
},
];
// let sheet2data = [
// {
// 宅基地使用权力人名: "张三",
// 手机: "13890778902",
// 权利人类型: "事业单位",
// 户口类型: "城市户口",
// },
// {
// 宅基地使用权力人名: "黎晓",
// 手机: "13890778901",
// 权利人类型: "事业单位",
// 户口类型: "城市户口",
// },
// ];
// let sheet3data = [
// {
// 房屋代码: "JK098",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 600,
// 建筑年代: "90年代",
// 建筑层数: 6,
// 是否发证: "是",
// 房屋状态: "正常",
// },
// {
// 房屋代码: "JK099",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 800,
// 建筑年代: "80年代",
// 建筑层数: 9,
// 是否发证: "是",
// 房屋状态: "正常",
// },
// {
// 房屋代码: "JK198",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 200,
// 建筑年代: "70年代",
// 建筑层数: 3,
// 是否发证: "是",
// 房屋状态: "危旧",
// },
// {
// 房屋代码: "JK298",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 300,
// 建筑年代: "60年代",
// 建筑层数: 2,
// 是否发证: "是",
// 房屋状态: "倒塌",
// },
// {
// 房屋代码: "JK398",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 500,
// 建筑年代: "90年代",
// 建筑层数: 7,
// 是否发证: "是",
// 房屋状态: "正常",
// },
// {
// 房屋代码: "JK498",
// 房屋结构: "钢筋混凝土结构",
// 建筑面积: 900,
// 建筑年代: "90年代",
// 建筑层数: 9,
// 是否发证: "是",
// 房屋状态: "在建",
// },
// ];
var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
// var sheet2 = XLSX.utils.json_to_sheet(sheet2data);
// var sheet3 = XLSX.utils.json_to_sheet(sheet3data);
// console.log(sheet1, sheet2, sheet3, "sheet123");
// 创建一个新的空的workbook
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, sheet1, "文件审计");
// XLSX.utils.book_append_sheet(wb, sheet2, "权利人信息");
// XLSX.utils.book_append_sheet(wb, sheet3, "房屋信息");
const workbookBlob = this.workbook2blob(wb);
this.openDownloadDialog(workbookBlob, "文件审计.xls");
},参照リンク: https://copyfuture.com/blogs-details/202204170950118354 Vue ピュア フロントエンド ダウンロード エクセル フォーム_昨夜の小さな建物と東風。ブログ - CSDN blog_vue ダウンロード エクセルhttps://copyfuture.com/blogs-details/202204170950118354