vue2文件下载和合计表格
vue2文件数据不多可以直接下载不需要后端的时候
1.首先,确保你已经安装了 docx
和 file-saver
库
npm install file-saver
npm install docx file-saver
2.全部代码如下
{{ form.rentOrg }}
{{ form.lesseeOrg }}
{{ form.socialCode }}
{{ form.startDate }}-{{ form.endDate }}
{{ form.contractNo }}
{{ form.contractName }}
下载缴费单
缴费
详情
关闭
vue2数据很多的时候需要后端
下载导入模板
import { downloadFile } from "@/api/manage";
api/manage代码如下
// import { axios } from '@/utils/request'
import axios from "@/utils/axios";
import signMd5Utils from "@/utils/encryption/signMd5Utils";
const api = {
user: "/mock/api/user",
role: "/mock/api/role",
service: "/mock/api/service",
permission: "/mock/api/permission",
permissionNoPager: "/mock/api/permission/no-pager",
};
export default api;
//post
export function postAction(url, parameter) {
let sign = signMd5Utils.getSign(url, parameter);
//将签名和时间戳,添加在请求接口 Header
let signHeader = {
"X-Sign": sign,
"X-TIMESTAMP": signMd5Utils.getDateTimeToString(),
};
return axios({
url: url,
method: "post",
data: parameter,
headers: signHeader,
});
}
//post method= {post | put}
export function httpAction(url, parameter, method) {
let sign = signMd5Utils.getSign(url, parameter);
//将签名和时间戳,添加在请求接口 Header
let signHeader = {
"X-Sign": sign,
"X-TIMESTAMP": signMd5Utils.getDateTimeToString(),
};
return axios({
url: url,
method: method,
data: parameter,
headers: signHeader,
});
}
//put
export function putAction(url, parameter) {
return axios({
url: url,
method: "put",
data: parameter,
});
}
//get
export function getAction(url, parameter) {
let sign = signMd5Utils.getSign(url, parameter);
//将签名和时间戳,添加在请求接口 Header
let signHeader = {
"X-Sign": sign,
"X-TIMESTAMP": signMd5Utils.getDateTimeToString(),
};
return axios({
url: url,
method: "get",
params: parameter,
headers: signHeader,
});
}
//deleteAction
export function deleteAction(url, parameter) {
return axios({
url: url,
method: "delete",
params: parameter,
});
}
export function getUserList(parameter) {
return axios({
url: api.user,
method: "get",
params: parameter,
});
}
export function getRoleList(parameter) {
return axios({
url: api.role,
method: "get",
params: parameter,
});
}
export function getServiceList(parameter) {
return axios({
url: api.service,
method: "get",
params: parameter,
});
}
export function getPermissions(parameter) {
return axios({
url: api.permissionNoPager,
method: "get",
params: parameter,
});
}
// id == 0 add post
// id != 0 update put
export function saveService(parameter) {
return axios({
url: api.service,
method: parameter.id == 0 ? "post" : "put",
data: parameter,
});
}
/**
* 下载文件 用于excel导出
* @param url
* @param parameter
* @returns {*}
*/
export function downFile(url, parameter, method) {
return axios({
url: url,
params: parameter,
method: method ? method : "get",
responseType: "blob",
});
}
/**
* 下载文件
* @param url 文件路径
* @param fileName 文件名
* @param parameter
* @returns {*}
*/
export function downloadFile(url, fileName, parameter,method) {
return downFile(url, parameter,method).then((data) => {
// if (!data || data.size === 0) {
// Vue.prototype['$message'].warning('文件下载失败')
// return
// }
if (typeof window.navigator.msSaveBlob !== "undefined") {
window.navigator.msSaveBlob(new Blob([data]), fileName);
} else {
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
});
}
/**
* 文件上传 用于富文本上传图片
* @param url
* @param parameter
* @returns {*}
*/
export function uploadAction(url, parameter) {
return axios({
url: url,
data: parameter,
method: "post",
headers: {
"Content-Type": "multipart/form-data", // 文件上传
},
});
}
/**
* 获取文件服务访问路径
* @param avatar
* @param subStr
* @returns {*}
*/
export function getFileAccessHttpUrl(avatar, subStr) {
if (!subStr) subStr = "http";
try {
if (avatar && avatar.startsWith(subStr)) {
return avatar;
} else {
if (avatar && avatar.length > 0 && avatar.indexOf("[") == -1) {
return window._CONFIG["staticDomainURL"] + "/" + avatar;
}
}
} catch (err) {
return;
}
}
使用
//导出模板
getExport() {
downloadFile(
"/asset/entryrecord/exportTemplateXls",
"财务信息模板.xlsx",
{},
"post"
);
},
合计
效果如图
代码
columns: [
{
title: "序号",
customRender: (text, record, index) => {
if (record.isTotalRow) {
return {
children: "合计",
attrs: { colSpan: 3 },
};
}
return index + 1;
},
width: 70,
align: "center",
},
{
title: "企业名称",
align: "center",
dataIndex: "companyName",
width: 150,
customRender: (text, record, index) => {
if (record.isTotalRow) {
return {
children: null,
attrs: { colSpan: 0 },
};
}
return text;
},
},
{
title: "转让资产名称",
align: "center",
dataIndex: "assetName",
width: 150,
customRender: (text, record, index) => {
if (record.isTotalRow) {
return {
children: null,
attrs: { colSpan: 0 },
};
}
return text;
},
},
{
title: "账面净值(元)",
align: "center",
dataIndex: "bookMoney",
width: 150,
},
{
title: "转让方式",
align: "center",
dataIndex: "transferWay",
width: 150,
customRender: (text, record, index) => {
switch (Number.parseInt(text)) {
case 1:
return "公开转让";
case 2:
return "协议转让";
default:
return "/";
}
},
},
{
title: "转让行为最终审批单位",
align: "center",
dataIndex: "transferFinalOrg",
width: 150,
customRender: (text, record, index) => {
switch (Number.parseInt(text)) {
case 1:
return "市政府";
case 2:
return "左海集团";
case 3:
return "二级企业";
default:
return "/";
}
},
},
{
title: "受让方名称",
align: "center",
dataIndex: "receiveName",
width: 150,
},
{
title: "受让方性质",
align: "center",
dataIndex: "receiveType",
width: 150,
customRender: (text, record, index) => {
switch (Number.parseInt(text)) {
case 1:
return "个人";
case 2:
return "私有企业";
case 3:
return "国有全资企业";
case 4:
return "国有控股企业";
case 5:
return "国有实际控制企业";
case 6:
return "国有参股企业";
default:
return "其他";
}
},
},
{
title: "评估价值(元)",
align: "center",
dataIndex: "evaluateMoney",
width: 150,
},
{
title: "转让底价(元)",
align: "center",
dataIndex: "transferMinPrice",
width: 150,
},
{
title: "成交金额(元)",
align: "center",
dataIndex: "dealMoney",
width: 150,
},
{
title: "溢价(元)",
align: "center",
dataIndex: "moreMoney",
width: 150,
},
{
title: "转让合同签订日期",
align: "center",
dataIndex: "signDate",
width: 150,
},
{
title: "备注",
align: "center",
dataIndex: "remark",
width: 150,
},
],
assetTransferAllCount() {
this.loading = true;
const meta = { companyName: this.queryParam.companyName };
// console.log("this.queryParam", this.queryParam);
assetTransferAllCount(meta)
.then((res) => {
this.loading = false;
if (res.code == 0) {
console.log("res", res);
this.dataSource = res.data.list;
// console.log(" this.dataSource", this.dataSource);
// 使用解构赋值简化对象创建过程
const {
bookMoney,
transferWay,
transferFinalOrg,
receiveName,
receiveType,
evaluateMoney,
transferMinPrice,
dealMoney,
moreMoney,
signDate,
remark,
} = res.data;
const obj = {
isTotalRow: true,
bookMoney,
transferWay: "/",
transferFinalOrg: "/",
receiveName: "/",
receiveType: "/",
evaluateMoney,
transferMinPrice,
dealMoney,
moreMoney,
signDate: "/",
remark,
};
this.dataSource.push(obj);
// console.log(" this.dataSource22", this.dataSource);
}
})
.catch((error) => {
this.loading = false;
console.error("Error fetching data:", error);
});
},
重点是
this.dataSource.push(obj);
对象解构
第一种
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// 使用解构赋值简化对象创建过程
const {
bookMoney,
transferWay,
transferFinalOrg,
receiveName,
receiveType,
evaluateMoney,
transferMinPrice,
dealMoney,
moreMoney,
signDate,
remark,
} = res.data;
const obj = {
isTotalRow: true,
bookMoney,
transferWay: "/",
transferFinalOrg: "/",
receiveName: "/",
receiveType: "/",
evaluateMoney,
transferMinPrice,
dealMoney,
moreMoney,
signDate: "/",
remark,
};
第二种
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
const {
data: res
} = await uni.$http.get('/api/public/v1/goods/detail', {
goods_id
})
console.log('res', res);