飞道科技

飞道科技文档总汇

导出

导出分为两种方式

  1. 通过服务方式进行导出
  2. 通过编写新页面的方式导出

新页面的方式导出

  1. 新页面的方式进行导出文件，可以导出的文件类型有：xlsx、pdf、docx
  2. 导出文件中的数据必须在服务端进行渲染
  3. 文件中的本地资源（css、images）需要添加inline属性
  4. 导出文件的页面服务端暂不能添加用户权限验证

导出xlsx

  1. 新页面导出excel只能导出简单内容的数据或者模板
  2. 导出excel必须使用标签table
  3. 本地测试导出excelhttp://127.0.0.1:8889/@page-name@.xlsx

导出pdf

  1. 若展示的pdf内容有滚动条，则可以在页面n.ts中body上设置样式overflow: visible;
  2. 本地测试导出pdfhttp://127.0.0.1:8889/@page-name@.pdf

导出docx

  1. 若在docx中展示内容为表格形式，请使用table标签
  2. 本地测试导出pdfhttp://127.0.0.1:8889/@page-name@.docx
  3. 在window上测试导出docx

服务导出

  1. 在服务中可导出的文件类型有：excel、docx、zip

导出excel

  1. 使用的第三方库exceljs[https://github.com/guyonroche/exceljs#readme]
  2. 可以设置文档基本信息
  3. 可以添加多个页签数据
  4. 可以设置级联选择
  5. 可以设置数据验证

导出excel基本方法

// 可以添加文件描述 wb.creator = ‘feidao’; // creator: string; // 创建者 // lastModifiedBy: string; // 最后修改人 // created: Date; // 创建时间 // modified: Date; // 修改时间 // lastPrinted: Date; // 最后打印时间 // Set workbook dates to 1904 date system // wb.properties.date1904 = true; // wb.views = [ // { // x: 0, y: 0, width: 10000, height: 20000, // firstSheet: 0, activeTab: 1, visibility: ‘visible’ // } // ]

-  在excel中添加数据，第一步创建页签
```ts
// 添加一个页签，可以添加多个页签
// 不输入名称则使用默认名称，可以针对该页签添加属性
// options = {properties:{}, pageSetup:{}, views:[{}]}
const dict1 = wb.addWorksheet();// 该页签的默认名称为`sheet1`
// 可以传入页签名称，符合变量的定义并且不能是excel的关键字

// 获取一行 const rows = dict1.getRow(3); // 设置布局 rows.alignment = {}; // 参考表头基本设置 // 设置字体 rows.font = {}; // 参考表头基本设置 // 设置样式 rows.style = {}; // 参考表头基本设置 // 设置高度 rows.height = 200; // 获取某一个单元格 rows.getCell(3);

-  单元格基本设置
```ts
// 获取某一个单元格
const cel = dict1.getCell('Z1');
// 获取一行，可以循环行单元格
const rows = dict1.getRow(3);
// 获取一列，可以循环列单元格
const columns = dict1.getColumn(4);
// 可以设置单元格信息
// 循环每一个单元格
columns.eachCell((cell, rowNumber) => {
	if (rowNumber > 1) {
		// 回调函数中参数说明，cell为单元格对象，rowNumber即当前单元格所在的行从1开始，不包含第一行
		// 设置单元格内容布局
		cell.alignment = {
			// horizontal: 'left', // 水平距左
			// vertical: 'justify', // 垂直 justify：两端对齐
			// wrapText: true, // 自动换行
			// indent: 20, // 缩进
			// readingOrder: 'ltr'
			// textRotation: 'vertical' // 文本回转
		};
		cell.font = {};// 参考表头基本设置
		cell.style = {};// 参考表头基本设置
	}
});

// 省数据，数据处理后的结构符合单元格渲染数据结构，此数据结构为[[‘河南省’],[‘河北省’],[‘山东省’]] const pro_data = cascade_data.filter((item) => { return item.pid === ‘’; }).reduce((pre, cur, idx, array) => { const name = cur.name; pre.push([name]); return pre; }, []);

const dict3 = wb.addWorksheet(‘省’); dict3.addRows(pro_data);

// 市数据，数据处理后的结构符合单元格渲染数据结构，并且在渲染的市数据单元格上添加名称管理器，名称管理器的值则为市的名称，此数据结构为[[‘河南省’,[‘郑州市’,’濮阳市’]],[‘河北省’,[‘石家庄市’,’唐山市’]],[‘山东省’,[‘济南市’,’聊城市’]] const city_data = cascade_data.filter((item) => { return item.pid === ‘’; }).reduce((pre, cur, idx, array) => { const id = cur.id; const name = cur.name; // 获取市数据 const c_data = cascade_data.filter((info) => { return info.pid === id; }).reduce((pre1, cur1, idx1, array1) => { pre1.push(cur1.name); return pre1; }, []); const arr = [name, c_data]; pre.push(arr); return pre; }, []);

const dict4 = wb.addWorksheet(‘市’); city_data.forEach((item, idx) => { const name = item[0]; const data = item[1]; dict4.addRow(data); // 获取刚渲染的行 const r = dict4.getRow(idx + 1); // 获取每一个单元格，在单元格上添加名称管理器 r.eachCell((cell, colNumber) => { // 设置单元格名称管理器 cell.addName(name); }); });

// 区数据，数据机构和市数据结构一致并添加名称管理器 const area_data: any[] = []; cascade_data.filter((item) => { return item.pid === ‘’; }).map((pro_item) => { const id = pro_item.id; const c_data = cascade_data.filter((item) => { return item.pid === id; }).map((c_item) => { const cid = c_item.id; const name = c_item.name; const a_data = cascade_data.filter((item) => { return item.pid === cid; }).reduce((pre, cur, idx, array) => { pre.push(cur.name); return pre; }, []); area_data.push([name, a_data]); }); });

const dict5 = wb.addWorksheet(‘区’); area_data.forEach((item, idx) => { const name = item[0]; const data = item[1]; dict5.addRow(data); const r = dict5.getRow(idx + 1); r.eachCell((cell, colNumber) => { // 添加名称管理器，name要以字母或下划线开头，不能包含空格，不能与excel内部或者工作薄中其他对象名称冲突 cell.addName(name); }); }); ////////////////////////// 将省市区数据添加到不同页签中 ///////////////////////////////////

/**

/**

/**

/**

  1. 使用的第三方库为docx[https://docx.js.org/#/examples]

导出docx基本方法

doc.addParagraph(paragraph); doc.addParagraph(paragraph2);

doc.createFootnote(new docx.Paragraph(“Test”)); doc.createFootnote(new docx.Paragraph(“My amazing reference”)); ///////////////////////////// 添加脚注 /////////////////////////////

-  书签
```ts
// 添加书签
	/**
	 * anchorID 书签名称
	 * Lorem Ipsum 针对添加书签内容 显示的内容
	 */
	const bookmark = doc.createBookmark('anchorID', "Lorem Ipsum");