feat:支持将多个docx文件打包成一个zip文件再下载，突破浏览器单次最多只可下载10个附件的限制

Author: Kelvin Poon

README.md

@@ -65,6 +65,12 @@
 
 <br/>
 
+**单/多选字段如何取值？**
+
+单选字段直接用括号即可取值，例如：```{类目}```
+多选字段的取值方式，跟成员字段略有不同，```{#字段名字}{.}{/字段的名字}```
+
+
 ## 🙋‍♂️ 常见问题
 
 **word模板修改完毕后需要重新上传，是每一行都要上传一次吗？**
@@ -94,6 +100,21 @@ safari的浏览器拦截了，暂不支持进行批量下载，只能一个一
 <br/>
 
 ## 🎯 更新日志
+v0.1.20 - 2022年6月30日
+- 【新增】批量导出功能升级，支持将多个docx文件打包成一个zip文件再下载，突破浏览器单次最多只可下载10个附件的限制
+
+v0.1.19 - 2022年5月25日
+- 【新增】支持维格表深色主题
+
+v0.1.16 - 2022年4月29日
+- 【优化】增加空文件的判断提醒。
+
+v0.1.14 - 2022年4月28日
+- 【调整】简化单选字段的取值方式，改为跟普通文本字段一样的语法```{字段名称}```
+
+v0.1.13 - 2022年4月27日
+- 【修复】无法读取多选字段内容的BUG
+
 v0.1.10 - 2022年3月22日
 - 【优化】增加“教程”超链接
 - 【优化】调整部分交互逻辑

cover.jpg

@@ -1,6 +1,5 @@
 {
-  "name": "word-document-generator",
-  "version": "0.1.10",
+  "version": "0.1.19",
   "description": "a vika widget",
   "engines": {
     "node": ">=8.x"
@@ -28,9 +27,9 @@
   "dependencies": {
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
-    "@vikadata/components": "^0.0.3",
-    "@vikadata/icons": "^0.0.1",
-    "@vikadata/widget-sdk": "0.0.3",
+    "@vikadata/components": "0.0.4",
+    "@vikadata/icons": "0.0.1",
+    "@vikadata/widget-sdk": "0.0.7",
     "docxtemplater": "^3.23.2",
     "file-saver": "^2.0.5",
     "pizzip": "^3.1.1",

cover.png

@@ -11,7 +11,7 @@ export const WidgetDeveloperTemplate: React.FC = () => {
   const permission = datasheet?.checkPermissionsForAddRecord()
 
   return (
-    <div style={{ display: 'flex', height: '100%', backgroundColor: '#fff', borderTop: '1px solid gainsboro' }}>
+    <div style={{ display: 'flex', height: '100%', background: 'var(--defaultBg)', borderTop: '1px solid var(--lineColor)' }}>
       <div style={{ flexGrow: 1, overflow: 'auto', padding: '0 8px'}}>
         <DocxGenerator />
       </div>

package.json

@@ -1,5 +1,5 @@
 import { useRecords, useFields, useActiveViewId, useSelection, useCloudStorage, useSettingsButton, useViewport, useField, Field, Record, IAttachmentValue, usePrimaryField, FieldType, useDatasheet } from '@vikadata/widget-sdk';
-import { Button } from '@vikadata/components';
+import { Button, IButtonProps } from '@vikadata/components';
 import { InformationSmallOutlined } from '@vikadata/icons';
 import React, { useEffect, useState } from 'react';
 import Docxtemplater from 'docxtemplater';
@@ -75,8 +75,12 @@ function throwError(error: any) {
 /**
  * 遍历已选择的多条 record ，从中获取数据并生成 word 文档
  */
-function generateDocuments(selectedRecords: Record[], fields: Field[], selectedAttachmentField: Field, primaryField: Field) {
+async function generateDocuments(selectedRecords: Record[], fields: Field[], selectedAttachmentField: Field, primaryField: Field) {
+  const outputZip = new PizZip();
 
+  // 鼠标只选择了一行
+  const single = selectedRecords.length>1 ? false : true;
+  var outputs = []
 
   for (let index = 0; index < selectedRecords.length; index++) {
     const record = selectedRecords[index]
@@ -92,11 +96,12 @@ function generateDocuments(selectedRecords: Record[], fields: Field[], selectedA
         row[field.name] = row[field.name].map(item => {
           return item.name
         })
+      } else if(field.type == FieldType.SingleSelect){
+        const selectOption = record.getCellValue(field.id)
+        row[field.name] = selectOption ? selectOption.name : ""
       }
     })
 
-    
-
     const attachements = record.getCellValue(selectedAttachmentField.id)
     if (!attachements) {
       alert(`在指定的附件字段中找不到word模板，请上传。record:[${filename}]`)
@@ -114,11 +119,47 @@ function generateDocuments(selectedRecords: Record[], fields: Field[], selectedA
 
     console.log({ row, attachements, prefix, suffix })
 
-    attachements && generateDocument(row, attachements[0], prefix + "-" + filename)
+    if(attachements) {
+      await generateDocument(row, attachements[0], prefix + "-" + filename, outputs)
+    }
+  }
+
+  console.log("outputs", outputs)
+  if(outputs.length>0){
+    let existedFilenames:Array<string> = []
+    const outputFileName = !single ? `documents.zip` : (outputs[0] as any).filename + ".docx"
+
+    if(!single){
+      for (let index = 0; index < outputs.length; index++) {
+        const docxItem:any = outputs[index];
+        const uniqueFilename = getUniqueFilename(existedFilenames, docxItem.filename)
+        existedFilenames.push(uniqueFilename)
+        outputZip.file(uniqueFilename + ".docx", docxItem.content)
+      }
+      const content = outputZip.generate({ type: "blob" })
+      saveAs(content, outputFileName)
+    } else {
+      const outputZip = new PizZip((outputs[0] as any).content)
+      saveAs(outputZip.generate({ type: "blob" }), outputFileName)
+    }
+    
   }
 
 }
 
+const getUniqueFilename = (existedFilenames, newFilename) => {
+  let targetFileName = newFilename
+  if (existedFilenames.indexOf(newFilename)>-1) {
+    for(var i=1; i<9999; i++){
+      targetFileName = newFilename + "_" + i
+        if (existedFilenames.indexOf(targetFileName) == -1) {
+            break;
+        }
+    }   
+  }
+  return targetFileName
+}
+
 /**
  * Docxtemplater 自定义标签解析器
  * @param tag 标签名称，eg: {产品名称} 
@@ -141,10 +182,13 @@ function generateDocuments(selectedRecords: Record[], fields: Field[], selectedA
     get(scope, context: DXT.ParserContext) {
       console.log({ tag, scope, context, TernaryResult })
 
+      if (tag === ".") {
+        return (typeof scope == "string") ? scope : JSON.stringify(scope)
+      }
+
       if (["$index", "$序号"].includes(tag)) {
         const indexes = context.scopePathItem
         return indexes[indexes.length - 1] + 1
-        
       } else if(tag === "$isLast"){
         const totalLength = context.scopePathLength[context.scopePathLength.length - 1]
         const index = context.scopePathItem[context.scopePathItem.length - 1]
@@ -188,52 +232,53 @@ function generateDocuments(selectedRecords: Record[], fields: Field[], selectedA
 /**
  * 调用第三方库，生成word文档并调起浏览器附件下载事件
  */
-function generateDocument(row: any, selectedAttachment: IAttachmentValue, filename: string) {
-
-  loadFile(selectedAttachment.url, function (error, content) {
-    if (error) {
-      throw error
-    }
-
-    const zip = new PizZip(content)
-
-    try {
+async function generateDocument(row: any, selectedAttachment: IAttachmentValue, filename: string, outputs: any) {
+  return new Promise<void>((resolve, reject) => {
+    loadFile(selectedAttachment.url, function (error, content: ArrayBuffer) {
+      if (error) {
+        throw error
+      }
 
-      const doc = new Docxtemplater(zip, {
-        paragraphLoop: true,
-        linebreaks: true,
-        parser: customParser,
-      })
+      if (0 == content.byteLength) {
+        return alert("Word模板文件的内容为空，请按照教程语法提前填写。")
+      }
 
-      doc.setData({...row, userGreeting: (scope) => {
-        return "How is it going, " + scope.user + " ? ";
-    }})
+      const zip = new PizZip(content)
 
       try {
-        doc.render();
-      } catch (error: any) {
-        throwError(error)
-      }
-
-      const out = doc.getZip().generate({
-        type: 'blob',
-        mimeType:
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-      });
 
-      saveAs(out, filename + ".docx")
-    } catch (error) {
-      console.log("错误信息", error)
-      alert(`文件 ${selectedAttachment.name} 的模板语法不正确，请检查`)
-    }
+        const doc = new Docxtemplater(zip, {
+          paragraphLoop: true,
+          linebreaks: true,
+          parser: customParser,
+        })
 
+        try {
+          doc.setData({...row}).render();
+        } catch (error: any) {
+          throwError(error)
+        }
 
-    // await uploadAttachment(activeDatasheetId, out).then(res => {
-    //   console.log(res)
-    // })
+        const out = doc.getZip().generate({
+          type: 'arraybuffer',
+          mimeType:
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+        });
 
+        outputs.push({
+          "content": out,
+          "filename": filename
+        })
 
-  });
+        //saveAs(out, filename + ".docx")
+        resolve()
+      } catch (error) {
+        console.log("错误信息", error)
+        alert(`文件 ${selectedAttachment.name} 的模板语法不正确，请检查`)
+        reject()
+      }
+    })
+  })
 }
 
 /**
@@ -285,6 +330,7 @@ export const DocxGenerator: React.FC = () => {
   const selectedAttachmentField = useField(fieldId)
 
   const [selectedRecords, setSelectedRecords] = useState<Record[]>([])
+  const [processing, setProcessing] = useState<Boolean>(false)
 
   const recordIds = selectionRecords.map((record: Record)=>{
     return record.recordId
@@ -327,6 +373,14 @@ export const DocxGenerator: React.FC = () => {
     </a>
   )
 
+  let btnProps:IButtonProps = {
+    variant: "fill",
+    color: "primary",
+    size:"small"
+  }
+
+  if(processing) btnProps.disabled = true;
+
   return (
     <div style={style1}>
       {helpLink} 
@@ -348,7 +402,20 @@ export const DocxGenerator: React.FC = () => {
           </div>
 
           <div style={{ marginTop: '16px', textAlign: 'center' }}>
-            {(selectedRecords.length > 0) ? <Button onClick={(e)=> generateDocuments(selectedRecords, fields, selectedAttachmentField, primaryField)} variant="fill" color="primary" size="small" >导出 Word 文档</Button> : "请点击表格任意单元格"}
+            {
+              (selectedRecords.length > 0) ? 
+              <Button 
+                {...btnProps}
+                onClick={async(e)=> {
+                  setProcessing(true)
+                  await generateDocuments(selectedRecords, fields, selectedAttachmentField, primaryField)
+                  setProcessing(false)
+                }}
+              >
+                {!processing ? "导出 Word 文档" : "生成中，请稍候"}
+              </Button> :
+               "请点击表格任意单元格"
+            }
           </div>
         </div>
       }
@@ -362,7 +429,7 @@ export const DocxGenerator: React.FC = () => {
             alignItems: 'center',
             width: '100%'
           }}>
-            <img src='https://s1.vika.cn/space/2021/12/29/5a4c225aed81490583cedbecf4bc3419' style={{ width: '30%' }} />
+            <img src='https://s1.vika.cn/space/2021/12/29/5a4c225aed81490583cedbecf4bc3419' style={{ width: '48px' }} />
           </div>
           <div>请设置一个存储word模板的附件字段</div>
 

src/developer_template.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSettingsButton, useCloudStorage, FieldPicker, useActiveViewId, useFields, useViewIds } from '@vikadata/widget-sdk';
+import { useSettingsButton, useCloudStorage, FieldPicker, useActiveViewId, useFields, useViewIds, FieldType } from '@vikadata/widget-sdk';
 import { InformationSmallOutlined } from '@vikadata/icons';
 
 export const Setting: React.FC = () => {
@@ -23,11 +23,23 @@ export const Setting: React.FC = () => {
   }
 
   return isShowingSettings ? (
-    <div style={{ flexShrink: 0, width: '300px', borderLeft: 'solid 1px gainsboro', paddingLeft: '16px', paddingTop: '40px', paddingRight: '16px', backgroundColor: '#fff' }}>
-      <h3>配置 <a style={{verticalAlign: "middle"}} title="查看教程" target="_blank" href="https://bbs.vika.cn/article/111" ><InformationSmallOutlined size={16}  /></a> </h3>
+    <div style={{ flexShrink: 0, width: '300px', borderLeft: 'solid 1px var(--lineColor)', paddingLeft: '16px', paddingTop: '40px', paddingRight: '16px', background: 'var(--defaultBg)' }}>
+      <h3 style={{color: 'var(--firstLevelText)'}}>
+        配置 
+        <a style={{verticalAlign: "middle", color: 'var(--thirdLevelText)', marginLeft: "4px"}} title="查看教程" target="_blank" href="https://bbs.vika.cn/article/111" >
+          <InformationSmallOutlined size={16}  />
+        </a>
+      </h3>
       <div style={{ marginTop: '16px' }}>
-        <label style={{ fontSize: '12px', color: '#999' }}>请选择 word 模板所在的附件列名</label>
-        <FieldPicker viewId={activeViewId?activeViewId:viewIds[0]} fieldId={fieldId} onChange={option => checkAndUpdateSelectedAttachmentField(option.value)} />
+        <label style={{ fontSize: '12px', color: 'var(--thirdLevelText)' }}>请选择 word 模板所在的附件列名</label>
+        <div style={{background: 'var(--fill0)'}}>
+          <FieldPicker 
+            viewId={activeViewId?activeViewId:viewIds[0]} 
+            fieldId={fieldId} 
+            onChange={option => checkAndUpdateSelectedAttachmentField(option.value)}
+            allowedTypes={[FieldType.Attachment]}
+          />
+        </div>
       </div>
     </div>
   ) : null;

src/docx_generator.tsx

@@ -16,5 +16,5 @@
     "zh-CN": "根据docx模板，一键批量填充字段并合成新的word文档",
     "en-US": "Create docx file with specified fields"
   },
-  "globalPackageId": "wpkIXaCPTCI8A"
+  "website": "https://bbs.vika.cn/article/111"
 }