devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 前端导出excel_uni-excel

作者：羊村懒王 | 2024-03-18 15:41:23

赞

踩

uni-excel

需求：app前端导出excel，不需要后台参与

方案1：用付费插件（Android读取excel或导出数据到Excel表 - DCloud 插件市场）实操确实可以用，可以设置各种属性，比较齐全

方案2：免费，缺点是有些属性目前不能适配，后续要研究一下，下面写下方案2的流程和代码

一、在comon创建exportExcel.js

  1. // exportExcel.js 可以直接复制
  2. let imgCount = 1;//图片计数器
  3.  
  4. /**
  5.  * 导出Excel
  6.  * @param {Object} fileName 文件名 会自动拼接时间戳防止重名
  7.  * @param {Object} data 数据内容 格式说明见下
  8.  * @param {Object} callback 导出成功的回调方法 返回文件保存路径
  9.  * 
  10.  * 二维数组 其中外层数组中的每个元素为数组 对应一行    内层数组中的每个元素为object对象 对应每个单元格 属性如下：
  11.  * type 类型 text为文字 img为图片 默认文字
  12.  * width 单元格宽度 请带单位 默认300px
  13.  * height 单元格高度 请带单位 默认25px
  14.  * color 文字颜色 默认黑色
  15.  * fontSize 字号 请带单位 默认16px
  16.  * textAlign 文字对齐方式 默认left
  17.  * imgWidth 仅type为img时需要 图片宽度 无需带单位 默认25
  18.  * imgHeight 仅type为img时需要 图片高度 无需带单位 默认25
  19.  * content 单元格内容 type为img时为图片路径 仅支持base64
  20.  * colspan 跨列 默认1
  21.  * rowspan 跨行 默认1
  22.  * 
  23.  * 示例：
  24.  * [
  25. 	[{
  26. 		content: '姓名',
  27. 		color: 'blue',
  28. 		type: 'text',
  29. 		width: '200px',
  30. 		height: '25px',
  31. 		fontSize: '16px'
  32. 	}, {
  33. 		content: '性别',
  34. 		color: 'blue',
  35. 		type: 'text',
  36. 		width: '200px',
  37. 		height: '25px',
  38. 		fontSize: '16px'
  39. 	}, {
  40. 		content: '头像',
  41. 		color: 'blue',
  42. 		type: 'text',
  43. 		width: '200px',
  44. 		height: '25px',
  45. 		fontSize: '16px'
  46. 	}],
  47. 	[{
  48. 		content: '张三',
  49. 		color: 'blue',
  50. 		type: 'text',
  51. 		width: '200px',
  52. 		height: '25px',
  53. 		fontSize: '16px',
  54. 		colspan: 2,
  55. 		rowspan:2
  56. 	}, {
  57. 		content: 'base64图片',
  58. 		type: 'img',
  59. 		width: '200px',
  60. 		height: '25px',
  61. 		imgWidth: 25,
  62. 		imgHeight: 25
  63. 	}],
  64. 	[{
  65. 		content: '123',
  66. 		color: 'blue',
  67. 		type: 'text',
  68. 		width: '200px',
  69. 		height: '25px',
  70. 		fontSize: '16px'
  71. 	}]
  72. ]
  73.  */
  74. let doExport = function (fileName,data,callback){
  75. 	imgCount = 1;
  76. 	let date = new Date();
  77. 	let year = date.getFullYear();
  78. 	let month = date.getMonth() + 1;
  79. 	let day = date.getDate();
  80. 	let hour = date.getHours();
  81. 	let minute = date.getMinutes();
  82. 	let second = date.getSeconds();
  83. 	if(month < 10){
  84. 		month = '0' + month;
  85. 	}
  86. 	if(day < 10){
  87. 		day = '0' + day;
  88. 	}
  89. 	if(hour < 10){
  90. 		hour = '0' + hour;
  91. 	}
  92. 	if(minute < 10){
  93. 		minute = '0' + minute;
  94. 	}
  95. 	if(second < 10){
  96. 		second = '0' + second;
  97. 	}
  98. 	let name = fileName || '导出的Excel';
  99. 	let reg = /\\|\//g;
  100. 	name = name.replace(reg,'|');
  101. 	name = '' + year + month + day + hour + minute + second + '_' + name;
  102. 	uni.showLoading({
  103. 		title: '正在导出',
  104. 		mask: true
  105. 	});
  106. 	formatTable(name,data,callback);
  107. }
  108.  
  109. async function formatTable(name,data,callback){
  110. 	let table = `<table style="line-height:3;">`;
  111. 	for (let item of data) {
  112. 		table += `<tr>`;
  113. 		for (let i of item) {
  114. 			let width = i.width || '70px';
  115. 			let height = i.height || '25px';
  116. 			let color = i.color || 'balck';
  117. 			let fontSize = i.fontSize || '16px';
  118. 			let textAlign = i.textAlign || 'left';
  119. 			let border = i.border || 'none';
  120. 			let colspan = i.colspan || 1;
  121. 			let rowspan = i.rowspan || 1;
  122. 			if(i.type==='img'){
  123. 				let imgWidth = i.imgWidth || 25;
  124. 				let imgHeight = i.imgHeight || 25;
  125. 				let src = await saveImg(name,i.content);
  126. 				console.log(src);
  127. 				if(src === 'fail'){
  128. 					uni.hideLoading();
  129. 					uni.showToast({
  130. 						title: '导出失败,请确认是否授权文件权限',
  131. 						icon: 'none'
  132. 					});
  133. 					return;
  134. 				}
  135. 				table += `<td style="width:${width};height:${height};color:${color};font-size:${fontSize};text-align:${textAlign};border:${border}" colspan="${colspan}" rowspan="${rowspan}"><img src="/图片${imgCount}.jpg" width="${imgWidth}" height="${imgHeight}">(图片${imgCount}.jpg)</td>`;
  136. 				imgCount ++;
  137. 			}else{
  138. 				table += `<td style="width:${width};height:${height};color:${color};font-size:${fontSize};text-align:${textAlign};border:${border};word-wrap:break-word;word-break:break-all;font-family:'宋体'" colspan="${colspan}" rowspan="${rowspan}">${i.content}</td>`;
  139. 			}
  140. 		}
  141. 		table += `</tr>`;
  142. 	}
  143. 	table += `</table>`;
  144. 	exportFile(formatTemplate(table),name,callback);
  145. }
  146.  
  147. function formatTemplate(data) {
  148. 	let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
  149. 			xmlns:x="urn:schemas-microsoft-com:office:excel" 
  150. 			xmlns="http://www.w3.org/TR/REC-html40">
  151. 			<head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
  152. 			<x:Name>sheet1</x:Name>
  153. 			<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
  154. 			</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
  155. 			</head><body>${data}</body></html>`;
  156. 	return template;
  157. }
  158.  
  159. function exportFile(fileData,documentName,callback) {
  160. 	createDir(documentName,(dirEntry,path,name) => {
  161. 		dirEntry.getFile(`${documentName}.xlsx`, {
  162. 			create: true
  163. 		}, (fileEntry) => {
  164. 			fileEntry.createWriter((writer) => {
  165. 				writer.onwritestart = (e) => {
  166. 					console.log('onwritestart');
  167. 				}
  168. 				writer.onwrite = (e) => {
  169. 					// 成功导出数据;
  170. 					setTimeout(() => {
  171. 						uni.hideLoading();
  172. 						uni.showToast({
  173. 							title: "成功导出",
  174. 							icon: "success"
  175. 						});
  176. 						console.log(`导出成功，文件位置：${path}/${documentName}.xlsx`);
  177. 						callback(`${path}/${documentName}.xlsx`);
  178. 					}, 1000);
  179. 				};
  180. 				// 写入内容;
  181. 				writer.write(fileData);
  182. 			}, function(e) {
  183. 				console.log(e.message);
  184. 				uni.hideLoading();
  185. 				uni.showToast({
  186. 					title: '导出失败,请确认是否授权文件权限',
  187. 					icon: 'none'
  188. 				});
  189. 			});
  190. 		},err=>{
  191. 			console.log(err);
  192. 			uni.hideLoading();
  193. 			uni.showToast({
  194. 				title: '导出失败,请确认是否授权文件权限',
  195. 				icon: 'none'
  196. 			});
  197. 		});
  198. 	});
  199. }
  200.  
  201. function saveImg(name,base64){
  202. 	return new Promise((resolve,reject) => {
  203. 		createDir(name,(dirEntry,path,name) => {
  204. 			let bitmap = new plus.nativeObj.Bitmap('图片'+imgCount);
  205. 			bitmap.loadBase64Data(base64,res => {
  206. 				console.log(`图片${imgCount}加载base64成功`);
  207. 				let fileName = '_documents/导出的Excel/' + name + '/图片' + imgCount + '.jpg';
  208. 				bitmap.save(fileName,{overwrite:true,quality:100,format:'jpg'},res1 => {
  209. 					console.log(res1);
  210. 					console.log(`图片${imgCount}保存成功,路径:${fileName}`);
  211. 					bitmap.clear();
  212. 					resolve('success');
  213. 				},err1 => {
  214. 					console.log(err1);
  215. 					reject('fail');
  216. 				});
  217. 			},err => {
  218. 				console.log(err);
  219. 				reject('fail');
  220. 			});
  221. 		});
  222. 	});
  223. }
  224.  
  225. function createDir(name,callback){
  226. 	plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, (fs) => {
  227. 		let rootObj = fs.root;
  228. 		let fullPath = rootObj.fullPath;
  229. 		rootObj.getDirectory('导出的Excel',{create:true},dirEntry => {
  230. 			dirEntry.getDirectory(name,{create:true},dirEntry2 => {
  231. 				let pathStr = fullPath.replace("/storage/emulated/0", "");
  232. 				pathStr += '导出的Excel/'+name;
  233. 				console.log(`目录${pathStr}创建成功`);
  234. 				callback(dirEntry2,pathStr,name);
  235. 			},err2=>{
  236. 				console.log(err2);
  237. 				uni.hideLoading();
  238. 				uni.showToast({
  239. 					title: '导出失败,请确认是否授权文件权限',
  240. 					icon: 'none'
  241. 				});
  242. 			});
  243. 		},err1=>{
  244. 			console.log(err1);
  245. 			uni.hideLoading();
  246. 			uni.showToast({
  247. 				title: '导出失败,请确认是否授权文件权限',
  248. 				icon: 'none'
  249. 			});
  250. 		});
  251. 	},err=>{
  252. 		console.log(err);
  253. 		uni.hideLoading();
  254. 		uni.showToast({
  255. 			title: '导出失败,请确认是否授权文件权限',
  256. 			icon: 'none'
  257. 		});
  258. 	});
  259. }
  260.  
  261. module.exports = doExport;

二、组件中使用

  1. let doExport = require('@/common/exportExcel.js')
  2. import { jsons } from './excelJson.js'
  3.  
  4. async printingOutline(item) { // 离线导出
  5. 	//要导出的json数据
  6. 	const jsonData = JSON.parse(JSON.stringify(jsons))
  7. 	const that = this
  8. 	doExport('input', jsonData, function(result){
  9. 		that.open(result)
  10. 	})
  11. },
  12.  
  13. open(url) { // 打开excel
  14. 	uni.openDocument({
  15. 		filePath: '/storage/emulated/0'+url, // 要加上前面/storage/emulated/0，不然打不开
  16. 		success:(res3) =>console.log('成功打开文档'),
  17. 		fail: (err) => {
  18. 			console.log('失败')
  19. 			console.log(err)
  20. 		}
  21. 	})
  22. }

excelJson.js

  1. export const jsons = [
  2. 	[
  3. 		{
  4. 			content: '预防控制中心',	
  5. 			type: 'text',
  6. 			fontSize: '18px',
  7. 			colspan: 18,
  8. 			textAlign: 'center',
  9. 			height: '50px'
  10. 		}
  11. 	],
  12. 	[
  13. 		{
  14. 			content: '采（抽）样登记表',
  15. 			type: 'text',
  16. 			fontSize: '18px',
  17. 			colspan: 18,
  18. 			textAlign: 'center',
  19. 			height: '50px'
  20. 		}
  21. 	],
  22. 	[
  23. 		{
  24. 			id: 'test_category',
  25. 			content: '检验检测类别',
  26. 			type: 'text',
  27. 			fontSize: '10px',
  28. 			colspan: 18,
  29. 			border: 'solid 1px #000'
  30. 		}
  31. 	],
  32. 	[
  33. 		{
  34. 			id: 'index',
  35. 			content: '序号',
  36. 			type: 'text',
  37. 			fontSize: '10px',
  38. 			border: 'solid 1px #000'
  39. 		},
  40. 		{
  41. 			id: 'sample_category_text',
  42. 			content: '样品类别',
  43. 			type: 'text',
  44. 			fontSize: '10px',
  45. 			border: 'solid 1px #000'
  46. 		},
  47. 		{
  48. 			id: 'sample_number',
  49. 			content: '样品编号',
  50. 			type: 'text',
  51. 			fontSize: '10px',
  52. 			border: 'solid 1px #000'
  53. 		},
  54. 		{
  55. 			id: 'sample_name',
  56. 			content: '样品名称',
  57. 			type: 'text',
  58. 			fontSize: '10px',
  59. 		},
  60. 		{
  61. 			id: 'sample_specifications_text',
  62. 			content: '样品规格',
  63. 			type: 'text',
  64. 			fontSize: '10px',
  65. 		},
  66. 		{
  67. 			id: 'quantity',
  68. 			content: '数量',
  69. 			type: 'text',
  70. 			fontSize: '10px',
  71. 		},
  72. 		{
  73. 			id: 'packaging_type_text',
  74. 			content: '包装类型',
  75. 			type: 'text',
  76. 			fontSize: '10px'
  77. 		},
  78. 		{
  79. 			id: 'sample_trademark',
  80. 			content: '样品商标',
  81. 			type: 'text',
  82. 			fontSize: '10px'
  83. 		},
  84. 		{
  85. 			id: 'packaging_form',
  86. 			content: '包装形式',
  87. 			type: 'text',
  88. 			fontSize: '10px'
  89. 		},
  90. 		{
  91. 			id: 'place_of_origin',
  92. 			content: '产地',
  93. 			type: 'text',
  94. 			fontSize: '10px',
  95. 		},
  96. 		{
  97. 			id: 'manufacturer',
  98. 			content: '生产厂家（样品来源）',
  99. 			type: 'text',
  100. 			fontSize: '10px',		    
  101. 		},
  102. 		{
  103. 			id: 'manufacturer_address',
  104. 			content: '生产厂家地址',
  105. 			type: 'text',
  106. 			fontSize: '10px',
  107. 		},
  108. 		{
  109. 			id: 'manufacture_date_number',
  110. 			content: '生产日期/批号',
  111. 			type: 'text',
  112. 			fontSize: '10px',
  113. 		},
  114. 		{
  115. 			id: 'sample_character_text',
  116. 			content: '样品性状',
  117. 			type: 'text',
  118. 			fontSize: '10px',
  119. 		},
  120. 		{
  121. 			id: 'storage_condition_text',
  122. 			content: '保存条件',
  123. 			type: 'text',
  124. 			fontSize: '10px',
  125. 		},
  126. 		{
  127. 			id: 'sample_locations',
  128. 			content: '采样地点',
  129. 			type: 'text',
  130. 			fontSize: '10px',
  131. 		},
  132. 		{
  133. 			id: 'sample_locations_type_text',
  134. 			content: '采样地点类型',
  135. 			type: 'text',
  136. 			fontSize: '10px',
  137. 		},
  138. 		{
  139. 			id: 'remark',
  140. 			content: '备注',
  141. 			type: 'text',
  142. 			fontSize: '10px',
  143. 		}
  144. 	]
  145. ]

三、导出结果

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/264086
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号