35 |
36 | 配置
37 |
38 |
41 |
72 | ) : null;
73 | };
74 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 维格小程序 - Word文档生成器
2 |
3 | 根据提供的docx模板，一键批量填充字段并合成新的word文档
4 |
5 | 
6 |
7 |
8 | ## 🎨 介绍
9 |
10 | 本小程序可以将每一行数据填充到 Word 模板里面，从而形成一份新的 Word 文档。同时选中多行记录，即可实现批量导出 Word 文档。
11 |
12 | 例如一份《录取通知书》。在日常工作中，公司HR一天可能会发送多份《录取通知书》，里面的格式都是一样的，只是“岗位”，“部门”，“候选人姓名”，“通知日期”等等这些信息要素会有所不同，但HR却需要手工重复性地复制粘贴、复制粘贴...
13 |
14 | 使用本小程序后，只需要提前制作一次 Word 模板，往后的工作就只需要点一点手指头，小程序来帮你填充关键信息要素，并生成新的《录取通知书》！
15 |
16 |
17 | ## 🚀 快速上手（现成模板）
18 |
19 | 为了让大家可以快速体验到这款小程序的用途，这里已经提前做好了一个维格表模板，包含两个例子，浏览器打开即可体验:
20 |
21 | > 体验地址：https://vika.cn/share/shrws2voRW3hGRYffBCbc
22 |
23 |
36 | 配置
37 |
38 |
41 |
42 |
43 |
52 |
44 | checkAndUpdateSelectedAttachmentField(option.value)}
48 | allowedTypes={[FieldType.Attachment]}
49 | />
50 |
51 |
53 |
54 |
71 |
55 |
70 |
64 | 输出到word文档里的内容，会保持跟表格里看到的一致，以货币类型举例：
65 | 开启前：1200
66 | 开启后："$1,200.00"
67 | 本配置项仅对货币，数字，百分比，日期列类型生效
68 |
24 | 25 | **如何修改模板** 26 | 27 | “聘请函模板”是一个附件字段，将单元格里的模板文件下载到本地，然后用word打开并进行编辑，编辑完成后重新上传覆盖单元格里的旧模板即可。 28 | 29 | 下图是《入职邀请函》模板里的内容节选。红色高亮的花括号是表格里的字段名称，表示将表格里的对应字段值填充到当前位置。有用过维格表智能公式的用户应该比较好理解。 30 | 31 |  32 | 33 |
34 | 35 | **读取「神奇关联」字段的值** 36 | 37 | 神奇关联需要用“开始标签”和“结束标签”组合起来读取。 38 | 39 | 开始标签：{#字段名字} 40 | 41 | 结束标签：{/字段的名字} 42 | 43 | 44 | 45 | 在开始标签和结束标标签中间，需要使用如下两个标签读取值： 46 | 47 | 循环读取关联记录的标题名称： {#字段名字}{title}{/字段的名字} 48 | 49 | 循环读取关联记录的id：{#字段名字}{recordId}{/字段的名字} 50 | 51 |
52 | 53 | **读取「神奇引用」字段的值** 54 | 55 | 在word模板里读取「神奇引用」字段的方式与「神奇关联」类似。但由于被引用的字段类型是多种多样的，具体如何适配，请通过console打印调试。 56 | 57 | 58 |
59 | 60 | **成员字段如何取值？** 61 | 62 | 成员字段的获取方式跟「神奇关联」类似： 63 | 64 | 循环读取成员字段的成员姓名 {#字段名字}{name}{/字段的名字} 65 | 66 |
67 | 68 | **单/多选字段如何取值？** 69 | 70 | 单选字段直接用括号即可取值，例如：```{类目}``` 71 | 多选字段的取值方式，跟成员字段略有不同，```{#字段名字}{.}{/字段的名字}``` 72 | 73 | 74 | ## 🙋♂️ 常见问题 75 | 76 | **word模板修改完毕后需要重新上传，是每一行都要上传一次吗？** 77 | 78 | 是的。一行数据代表着独立的一份word文档，需要单独配置一个模板。tips：你可以拖动单元格右下角的“把手（小方块）”，进行快速的填充模板附件。 79 | 80 |
81 | 82 | **如何将「word文档生成器」小程序添加到自己空间站的其他表格里？** 83 | 84 | 「word文档生成器」已经上架到小程序中心，你可以直接安装。 85 | 86 |
87 | 88 | **使用Mac系统的Safari浏览器访问小程序，无法进行word文件的批量下载？** 89 | 90 | safari的浏览器拦截了，暂不支持进行批量下载，只能一个一个下载。在Mac系统里维格表客户端同样存在这个问题。如果需要批量下载，请使用Chrome或者Edge浏览器。 91 | 92 |
93 | 94 | ## 🥂 讨论交流 95 | 96 | 在日常使用中或者二次开发过程中有疑问或者新想法，欢迎前往官方社区的小程序主页留言评论给我~ 97 | 98 | 👉 [点我跳转「Word文档生成器」的主页](https://bbs.vika.cn/article/111) 99 | 100 |
101 | 102 | ## 🎯 更新日志 103 | v0.1.20 - 2022年6月30日 104 | - 【新增】批量导出功能升级，支持将多个docx文件打包成一个zip文件再下载，突破浏览器单次最多只可下载10个附件的限制 105 | 106 | v0.1.19 - 2022年5月25日 107 | - 【新增】支持维格表深色主题 108 | 109 | v0.1.16 - 2022年4月29日 110 | - 【优化】增加空文件的判断提醒。 111 | 112 | v0.1.14 - 2022年4月28日 113 | - 【调整】简化单选字段的取值方式，改为跟普通文本字段一样的语法```{字段名称}``` 114 | 115 | v0.1.13 - 2022年4月27日 116 | - 【修复】无法读取多选字段内容的BUG 117 | 118 | v0.1.10 - 2022年3月22日 119 | - 【优化】增加“教程”超链接 120 | - 【优化】调整部分交互逻辑 121 | - 【优化】加上docx文件格式校验 122 | 123 | v0.1.7 - 2022年2月21日 124 | - 【新增】条件标签 \$isFirst，用于判断当前循环项是否数组的第一个元素，如果“是”，返回True，格式为 ```{#$isFirst}...{/$isFirst}``` 125 | - 【新增】条件标签 \$isLast，用于判断当前循环项是否数组的最后一个元素，如果“是”，返回True，格式为 ```{#$isLast}...{/$isLast}``` 126 | - 【新增】三元表达式的标签语法，格式为 ```{gender==male ? 男 : 女}``` 127 | - 【新增】条件标签函数 find(), 用于查找数组（只支持一维数组）中是否存在某个元素，找到对应元素返回True，反之返回False，格式为 ```{#fieldName|find(xxx)}...{/}```，注意"|"两边不能有空格 128 | 129 | v0.1.5 - 2022年1月12日 130 | - 【修复】loop index无法正常显示的问题 131 | 132 | v0.1.4 - 2022年1月11日 133 | - 【修复】修复因为useEffect的参数相同导致无法刷新record的问题 134 | 135 | v0.1.3 - 2022年1月11日 136 | - 【调整】鼠标点击空白地方后，仍会保留上次已选中的记录（如果没有选中记录，则无法导出word） 137 | 138 | v0.1.2 - 2021年12月29日 139 | - 【优化】更新icon远程图片 140 | - 【调整】小程序的背景颜色 141 | 142 | v0.1.0 - 2021年12月16日 143 | 144 | - 【新增】发布首个版本，当用户在维格视图下选中任意行的时候可以快速导入行数据并依据字段名（```{字段名}```）一一对应替换，生成word文档。 145 | 146 |
147 | 148 | ## 😍 更多有趣的维格小程序 149 | 如果你喜欢学习、折腾各种维格小程序，可以看看维格官方的宝藏库，里面收集有大量的小程序项目、vika API项目： 150 | 151 | 👉 [awesome-vikadata](https://github.com/vikadata/awesome-vikadata) 152 | -------------------------------------------------------------------------------- /src/docx_generator.tsx: -------------------------------------------------------------------------------- 1 | import { useRecords, useFields, useActiveViewId, useSelection, useCloudStorage, useSettingsButton, useViewport, useField, Field, Record, IAttachmentValue, usePrimaryField, FieldType, useDatasheet } from '@vikadata/widget-sdk'; 2 | import { Button, IButtonProps } from '@vikadata/components'; 3 | import { InformationSmallOutlined } from '@vikadata/icons'; 4 | import React, { useEffect, useState } from 'react'; 5 | import Docxtemplater from 'docxtemplater'; 6 | import {DXT} from 'docxtemplater'; 7 | import PizZip from 'pizzip'; 8 | import PizZipUtils from 'pizzip/utils/index.js'; 9 | import { saveAs } from 'file-saver'; 10 | import { useHotkeys } from 'react-hotkeys-hook' 11 | 12 | 13 | const userToken = "" 14 | 15 | /** 16 | * 通过URL读取文件内容 17 | */ 18 | function loadFile(url: String, callback) { 19 | PizZipUtils.getBinaryContent(url, callback); 20 | } 21 | 22 | function replaceErrors(key: String, value: any) { 23 | if (value instanceof Error) { 24 | return Object.getOwnPropertyNames(value).reduce(function ( 25 | error, 26 | key 27 | ) { 28 | error[key] = value[key]; 29 | return error; 30 | }, 31 | {}); 32 | } 33 | return value; 34 | } 35 | 36 | /** 37 | * 将 Blob 文件对象作为附件上传到指定的表格 38 | * @param activeDatasheetId 当前表格的ID 39 | * @param fileBlob 待上传的文件对象 40 | */ 41 | async function uploadAttachment(activeDatasheetId: String, fileBlob: Blob) { 42 | console.log("uploadAttachment", activeDatasheetId) 43 | 44 | const url = `https://api.vika.cn/fusion/v1/datasheets/${activeDatasheetId}/attachments` 45 | let formData = new FormData() 46 | let file = new File([fileBlob], "tag-example.docx", { "type": "'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" }) 47 | formData.append('file', file); 48 | 49 | return await fetch(url, { 50 | method: "POST", 51 | body: formData, 52 | headers: { 53 | 'Authorization': `Bearer ${userToken}` 54 | } 55 | }).then(res => res.json()) 56 | } 57 | 58 | /** 59 | * 文档生成的异常处理 60 | * @param error 61 | */ 62 | function throwError(error: any) { 63 | console.log("模板解析错误", JSON.stringify({ error: error }, replaceErrors)); 64 | 65 | if (error.properties && error.properties.errors instanceof Array) { 66 | const errorMessages = error.properties.errors 67 | .map(function (error) { 68 | return error.properties.explanation; 69 | }) 70 | .join('\n'); 71 | console.log('errorMessages', errorMessages); 72 | } 73 | throw error; 74 | } 75 | 76 | /** 77 | * 遍历已选择的多条 record ，从中获取数据并生成 word 文档 78 | */ 79 | async function generateDocuments(selectedRecords: Record[], fields: Field[], selectedAttachmentField: Field, primaryField: Field, keepFormat: boolean) { 80 | const outputZip = new PizZip(); 81 | 82 | // 鼠标只选择了一行 83 | const single = selectedRecords.length>1 ? false : true; 84 | var outputs = [] 85 | 86 | for (let index = 0; index < selectedRecords.length; index++) { 87 | const record = selectedRecords[index] 88 | const row = {} 89 | const filename = record.getCellValueString(primaryField.id) || "未命名" 90 | 91 | fields.forEach(field => { 92 | console.log({ 93 | "name": field.name, 94 | "cellValue": record.getCellValue(field.id) || "", 95 | "cellValueString": record.getCellValueString(field.id) || "" 96 | }) 97 | 98 | row[field.name] = record.getCellValue(field.id) || "" 99 | 100 | if (field.type == FieldType.MagicLink) { 101 | // TODO 102 | } else if (field.type == FieldType.MultiSelect) { 103 | row[field.name] = record.getCellValue(field.id) || [] 104 | row[field.name] = row[field.name].map(item => { 105 | return item.name 106 | }) 107 | } else if (field.type == FieldType.SingleSelect) { 108 | const selectOption = record.getCellValue(field.id) 109 | row[field.name] = selectOption ? selectOption.name : "" 110 | } else if (keepFormat && [FieldType.Number, FieldType.Currency, FieldType.Percent, FieldType.DateTime].includes(field.type)) { 111 | row[field.name] = record.getCellValueString(field.id) || "" 112 | } 113 | }) 114 | 115 | const attachements = record.getCellValue(selectedAttachmentField.id) 116 | if (!attachements) { 117 | alert(`在指定的附件字段中找不到word模板，请上传。record:[${filename}]`) 118 | break 119 | } 120 | const attachmentName = attachements[0].name 121 | 122 | const prefix = attachmentName.substr(0, attachmentName.lastIndexOf(".")) 123 | const suffix = attachmentName.substr(attachmentName.lastIndexOf(".")).toLowerCase() 124 | 125 | if(suffix !== ".docx"){ 126 | alert(`只支持.docx格式的word模板（当前模板：${attachmentName}）`) 127 | break 128 | } 129 | 130 | console.log({ row, attachements, prefix, suffix }) 131 | 132 | if(attachements) { 133 | await generateDocument(row, attachements[0], prefix + "-" + filename, outputs) 134 | } 135 | } 136 | 137 | console.log("outputs", outputs) 138 | if(outputs.length>0){ 139 | let existedFilenames:Array
310 |
319 | )
320 | }
321 |
322 | export const DocxGenerator: React.FC = () => {
323 | const { isFullscreen, toggleFullscreen } = useViewport()
324 | const [isShowingSettings, toggleSettings] = useSettingsButton()
325 |
326 | const activeViewId = useActiveViewId()
327 | const selection = useSelection()
328 | const selectionRecords = useRecords(activeViewId, { ids: selection?.recordIds })
329 | const fields = useFields(activeViewId)
330 | const primaryField = usePrimaryField() || fields[0]
331 |
332 | const datasheet = useDatasheet()
333 |
334 | // 校验用户是否有新增记录的权限，从而判断用户对表格是否只读权限
335 | const permission = datasheet?.checkPermissionsForAddRecord()
336 |
337 |
338 | // 读取配置
339 | const [keepFormat] = useCloudStorage不支持在小程序展开状态下导出word文档
311 |
312 |
313 |
314 |
318 |
397 | {helpLink}
398 |
399 | {selectedAttachmentField &&
400 |
453 | );
454 | };
455 |
--------------------------------------------------------------------------------
401 |
432 | }
433 |
434 | {!selectedAttachmentField &&
435 |
408 | 
409 |
410 |
411 |
412 | {(selectedRecords.length > 0) &&
414 |
415 | 已选中 {selectedRecords.length} 条记录
}
413 |
416 | {
417 | (selectedRecords.length > 0) ?
418 | :
428 | "请点击表格任意单元格"
429 | }
430 |
431 |
436 |
451 | }
452 |
443 | 
444 |
445 | 请设置一个存储word模板的附件字段
446 |
447 |
448 |
449 |
450 |