office-viewer 0.1.4 → 0.2.0

package/README.md

@@ -8,8 +8,6 @@ docx 渲染器，原理是将 docx 里的 xml 格式转成 html
 
 ## 已知不支持的功能
 
-- 分页符
-- 形状
 - 艺术字
 - 域
 - 对象

package/esm/Word.d.ts

@@ -209,6 +209,7 @@ export default class Word {
      * 当前渲染的段，因为很多渲染需要，所以为了避免大量传参，这里直接挂在这里
      */
     currentSection: Section;
+    DOCUMENT_RELS: string;
     /**
      * 初始化一些公共资源，比如
      */
@@ -263,6 +264,13 @@ export default class Word {
      * 加载图片
      */
     loadImage(relation: Relationship): string | null;
+    /**
+     * 保存新图片，这个方法主要用于图片变量，需要生成新的 relation
+     * @param newRelId 关系 id
+     * @param blob 文件数据
+     * @param ext 扩展名
+     */
+    saveNewImage(newRelId: string, data: Uint8Array): void;
     loadFont(rId: string, key: string): string | null;
     /**
      * 解析 html
@@ -310,7 +318,7 @@ export default class Word {
     /**
      * 下载生成的文档，会对 word/document.xml 进行处理，替换文本
      */
-    download(fileName?: string): void;
+    download(fileName?: string): Promise<void>;
     /**
      * 打印功能
      */

package/esm/Word.js

@@ -16,13 +16,14 @@ import ZipPackageParser from './package/ZipPackageParser.js';
 import { buildXML } from './util/xml.js';
 import { deobfuscate } from './openxml/word/Font.js';
 import { renderFont } from './render/renderFont.js';
-import { replaceVar, replaceT } from './util/replaceVar.js';
+import { replaceT, replaceVar } from './util/replaceVar.js';
 import { parseFootnotes } from './parse/Footnotes.js';
 import { parseEndnotes } from './parse/parseEndnotes.js';
 import { renderNotes } from './render/renderNotes.js';
 import { printIframe } from './util/print.js';
 import { Settings } from './openxml/Settings.js';
 import { get } from './util/get.js';
+import { fileTypeFromBuffer } from './util/fileType.js';
 
 var defaultRenderOptions = {
     classPrefix: 'docx-viewer',
@@ -78,6 +79,7 @@ var Word = /** @class */ (function () {
          * 分页标记，如果为 true，那么在渲染的时候会强制分页
          */
         this.breakPage = false;
+        this.DOCUMENT_RELS = '/word/_rels/document.xml.rels';
         parser.load(docFile);
         this.id = Word.globalId++;
         this.parser = parser;
@@ -201,8 +203,8 @@ var Word = /** @class */ (function () {
         }
         this.relationships = rels;
         var documentRels = {};
-        if (this.parser.fileExists('/word/_rels/document.xml.rels')) {
-            documentRels = parseRelationships(this.parser.getXML('/word/_rels/document.xml.rels'), 'word');
+        if (this.parser.fileExists(this.DOCUMENT_RELS)) {
+            documentRels = parseRelationships(this.parser.getXML(this.DOCUMENT_RELS), 'word');
         }
         this.documentRels = documentRels;
         var fontTableRels = {};
@@ -300,7 +302,7 @@ var Word = /** @class */ (function () {
         }
         var data = this.renderOptions.data;
         if (text.indexOf('{{') !== -1) {
-            text = text.replace(/{{([^}]+)}}/g, function (all, group) {
+            text = text.replace(/{{([^{}]+)}}/g, function (all, group) {
                 var result = _this.renderOptions.evalVar(group, data);
                 if (typeof result === 'undefined') {
                     return '';
@@ -331,6 +333,37 @@ var Word = /** @class */ (function () {
         }
         return null;
     };
+    /**
+     * 保存新图片，这个方法主要用于图片变量，需要生成新的 relation
+     * @param newRelId 关系 id
+     * @param blob 文件数据
+     * @param ext 扩展名
+     */
+    Word.prototype.saveNewImage = function (newRelId, data) {
+        if (this.parser.fileExists(this.DOCUMENT_RELS)) {
+            var documentRels = this.parser.getXML(this.DOCUMENT_RELS);
+            // 基于一个克隆更稳妥
+            var newRelation = documentRels
+                .getElementsByTagName('Relationship')
+                .item(0)
+                .cloneNode(true);
+            newRelation.setAttributeNS(null, 'Id', newRelId);
+            newRelation.setAttributeNS(null, 'Type', 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/image');
+            var ext = '';
+            var fileType = fileTypeFromBuffer(data);
+            if (fileType) {
+                ext = '.' + fileType.ext;
+            }
+            var imagePath = 'media/image' + newRelId + ext;
+            newRelation.setAttributeNS(null, 'Target', imagePath);
+            documentRels
+                .getElementsByTagName('Relationships')[0]
+                .appendChild(newRelation);
+            // 需要使用相对路径
+            this.parser.saveFile(this.DOCUMENT_RELS.replace(/^\//, ''), buildXML(documentRels));
+            this.parser.saveFile('word/' + imagePath, data);
+        }
+    };
     Word.prototype.loadFont = function (rId, key) {
         var relation = this.getFontTableRels(rId);
         if (!relation) {
@@ -458,18 +491,29 @@ var Word = /** @class */ (function () {
      */
     Word.prototype.download = function (fileName) {
         if (fileName === void 0) { fileName = 'document.docx'; }
-        var documentData = this.getXML('word/document.xml');
-        if (this.renderOptions.enableVar) {
-            mergeRun(this, documentData);
-            replaceVar(this, documentData);
-            // 对文本进行替换
-            var ts = documentData.getElementsByTagName('w:t');
-            for (var i = 0; i < ts.length; i++) {
-                replaceT(this, ts[i], this.renderOptions.data);
-            }
-        }
-        var blob = this.parser.generateZip(buildXML(documentData));
-        downloadBlob(blob, fileName);
+        return __awaiter(this, void 0, void 0, function () {
+            var documentData, ts, i, blob;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        documentData = this.getXML('word/document.xml');
+                        if (!this.renderOptions.enableVar) return [3 /*break*/, 2];
+                        mergeRun(this, documentData);
+                        return [4 /*yield*/, replaceVar(this, documentData, true)];
+                    case 1:
+                        _a.sent();
+                        ts = documentData.getElementsByTagName('w:t');
+                        for (i = 0; i < ts.length; i++) {
+                            replaceT(this, ts[i], this.renderOptions.data);
+                        }
+                        _a.label = 2;
+                    case 2:
+                        blob = this.parser.generateZip(buildXML(documentData));
+                        downloadBlob(blob, fileName);
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     /**
      * 打印功能
@@ -514,34 +558,39 @@ var Word = /** @class */ (function () {
         return __awaiter(this, void 0, void 0, function () {
             var renderOptions, isDebug, documentData, document, documentElement;
             return __generator(this, function (_a) {
-                this.init();
-                this.currentPage = 0;
-                renderOptions = __assign(__assign({}, this.renderOptions), renderOptionsOverride);
-                isDebug = renderOptions.debug;
-                isDebug && console.log('init', this);
-                this.rootElement = root;
-                root.innerHTML = '';
-                documentData = this.getXML('word/document.xml');
-                isDebug && console.log('documentData', documentData);
-                if (renderOptions.enableVar) {
-                    mergeRun(this, documentData);
-                    replaceVar(this, documentData);
-                    // 这里不进行变量替换，方便后续进行局部替换来更新变量
-                }
-                document = WDocument.fromXML(this, documentData);
-                isDebug && console.log('document', document);
-                documentElement = renderDocument(root, this, document, renderOptions);
-                root.classList.add(this.getClassPrefix());
-                if (renderOptions.page && renderOptions.pageWrap) {
-                    root.classList.add(this.wrapClassName);
-                    root.style.padding = "".concat(renderOptions.pageWrapPadding || 0, "pt");
-                    root.style.background = renderOptions.pageWrapBackground || '#ECECEC';
+                switch (_a.label) {
+                    case 0:
+                        this.init();
+                        this.currentPage = 0;
+                        renderOptions = __assign(__assign({}, this.renderOptions), renderOptionsOverride);
+                        isDebug = renderOptions.debug;
+                        isDebug && console.log('init', this);
+                        this.rootElement = root;
+                        root.innerHTML = '';
+                        documentData = this.getXML('word/document.xml');
+                        isDebug && console.log('documentData', documentData);
+                        if (!renderOptions.enableVar) return [3 /*break*/, 2];
+                        mergeRun(this, documentData);
+                        return [4 /*yield*/, replaceVar(this, documentData)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        document = WDocument.fromXML(this, documentData);
+                        isDebug && console.log('document', document);
+                        documentElement = renderDocument(root, this, document, renderOptions);
+                        root.classList.add(this.getClassPrefix());
+                        if (renderOptions.page && renderOptions.pageWrap) {
+                            root.classList.add(this.wrapClassName);
+                            root.style.padding = "".concat(renderOptions.pageWrapPadding || 0, "pt");
+                            root.style.background = renderOptions.pageWrapBackground || '#ECECEC';
+                        }
+                        appendChild(root, renderStyle(this));
+                        appendChild(root, renderFont(this.fontTable));
+                        appendChild(root, documentElement);
+                        appendChild(root, renderNotes(this));
+                        return [2 /*return*/];
                 }
-                appendChild(root, renderStyle(this));
-                appendChild(root, renderFont(this.fontTable));
-                appendChild(root, documentElement);
-                appendChild(root, renderNotes(this));
-                return [2 /*return*/];
             });
         });
     };

package/esm/package/PackageParser.d.ts

@@ -13,6 +13,10 @@ export interface PackageParser {
      * 根据类型读取文件
      */
     getFileByType(filePath: string, type: 'string' | 'blob' | 'uint8array'): string | Blob | Uint8Array | null;
+    /**
+     * 写入文件，主要用于图片
+     */
+    saveFile(filePath: string, content: Uint8Array | string): void;
     /**
      * 文件是否存在
      */

package/esm/package/XMLPackageParser.d.ts

@@ -20,6 +20,7 @@ export default class XMLPackageParser implements PackageParser {
      * 在 xml 下基本不用这个
      */
     getFileByType(filePath: string, type: 'string' | 'blob'): string | Uint8Array | Blob | null;
+    saveFile(filePath: string, content: Uint8Array | string): void;
     /**
      * 判断文件是否存在
      */

package/esm/package/ZipPackageParser.d.ts

@@ -18,6 +18,10 @@ export default class ZipPackageParser implements PackageParser {
      * 根据类型读取文件
      */
     getFileByType(filePath: string, type: 'string' | 'blob' | 'uint8array'): string | Uint8Array | Blob | null;
+    /**
+     * xml 下没这功能
+     */
+    saveFile(filePath: string, content: Uint8Array | string): void;
     /**
      * 判断文件是否存在
      */

package/esm/package/ZipPackageParser.js

@@ -48,6 +48,15 @@ var ZipPackageParser = /** @class */ (function () {
         console.warn('getFileByType', filePath, 'not found');
         return null;
     };
+    /**
+     * xml 下没这功能
+     */
+    ZipPackageParser.prototype.saveFile = function (filePath, content) {
+        if (typeof content === 'string') {
+            content = strToU8(content);
+        }
+        this.zip[filePath] = content;
+    };
     /**
      * 判断文件是否存在
      */

package/esm/render/renderParagraph.js

@@ -11,14 +11,13 @@ import { setElementStyle } from './setElementStyle.js';
 import { renderTab } from './renderTab.js';
 import { OMath } from '../openxml/math/OMath.js';
 import { renderOMath } from './renderMath.js';
-import { Tab } from '../openxml/word/Tab.js';
 
 /**
  * 渲染段落
  * @param renderEmptySpace 如果是 true 的话，当内容为空时会自动加上  
  */
 function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
-    var e_1, _a, e_2, _b, e_3, _c;
+    var e_1, _a;
     if (renderEmptySpace === void 0) { renderEmptySpace = true; }
     if (inHeader === void 0) { inHeader = false; }
     word.currentParagraph = paragraph;
@@ -38,45 +37,25 @@ function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
         // 虽然目前这个实现很 hack，但可以支持常见情况
         appendChild(p, renderTab(word, properties.tabs[0], true));
         // 同时删掉第一个 run 中的 tab
-        var done = false;
-        try {
-            for (var _d = __values(paragraph.children), _e = _d.next(); !_e.done; _e = _d.next()) {
-                var child = _e.value;
-                if (done) {
-                    break;
-                }
-                if (child instanceof Run) {
-                    try {
-                        for (var _f = (e_2 = void 0, __values(child.children)), _g = _f.next(); !_g.done; _g = _f.next()) {
-                            var runChild = _g.value;
-                            if (runChild instanceof Tab) {
-                                child.children.splice(child.children.indexOf(runChild), 1);
-                                done = true;
-                                break;
-                            }
-                        }
-                    }
-                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                    finally {
-                        try {
-                            if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
-                        }
-                        finally { if (e_2) throw e_2.error; }
-                    }
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
+        // let done = false;
+        // for (const child of paragraph.children) {
+        //   if (done) {
+        //     break;
+        //   }
+        //   if (child instanceof Run) {
+        //     for (const runChild of child.children) {
+        //       if (runChild instanceof Tab) {
+        //         child.children.splice(child.children.indexOf(runChild), 1);
+        //         done = true;
+        //         break;
+        //       }
+        //     }
+        //   }
+        // }
     }
     try {
-        for (var _h = __values(paragraph.children), _j = _h.next(); !_j.done; _j = _h.next()) {
-            var child = _j.value;
+        for (var _b = __values(paragraph.children), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var child = _c.value;
             if (child instanceof Run) {
                 if (child.fldChar === 'begin') {
                     inFldChar = true;
@@ -101,12 +80,12 @@ function renderParagraph(word, paragraph, renderEmptySpace, inHeader) {
             }
         }
     }
-    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
     finally {
         try {
-            if (_j && !_j.done && (_c = _h.return)) _c.call(_h);
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
         }
-        finally { if (e_3) throw e_3.error; }
+        finally { if (e_1) throw e_1.error; }
     }
     // 空行自动加个空格，不然会没高度
     if (p.innerHTML === '' && renderEmptySpace) {

package/esm/util/fileType.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 自动识别文件类型，只支持少数几种，参考了 file-type 项目里的实现
+ */
+type FileType = {
+    ext: string;
+    mime: string;
+};
+export declare function fileTypeFromBuffer(buffer: Uint8Array): FileType | null;
+export {};

package/esm/util/fileType.js

@@ -0,0 +1,66 @@
+import { __values, __read, __spreadArray } from 'tslib';
+
+/**
+ * 自动识别文件类型，只支持少数几种，参考了 file-type 项目里的实现
+ */
+function check(buffer, headers, options) {
+    var e_1, _a;
+    if (options === void 0) { options = {}; }
+    var offset = options.offset || 0;
+    try {
+        for (var _b = __values(headers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = __read(_c.value, 2), index = _d[0], header = _d[1];
+            // If a bitmask is set
+            if (options.mask) {
+                // If header doesn't equal `buf` with bits masked off
+                if (header !== (options.mask[index] & buffer[index + offset])) {
+                    return false;
+                }
+            }
+            else if (header !== buffer[index + offset]) {
+                return false;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return true;
+}
+function stringToBytes(string) {
+    return __spreadArray([], __read(string), false).map(function (character) { return character.charCodeAt(0); });
+}
+function checkString(buffer, string, options) {
+    if (options === void 0) { options = {}; }
+    return check(buffer, stringToBytes(string), options);
+}
+function fileTypeFromBuffer(buffer) {
+    if (check(buffer, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) {
+        return { ext: 'png', mime: 'image/png' };
+    }
+    if (check(buffer, [0xff, 0xd8, 0xff])) {
+        return { ext: 'jpg', mime: 'image/jpeg' };
+    }
+    if (check(buffer, [0x47, 0x49, 0x46])) {
+        return { ext: 'gif', mime: 'image/gif' };
+    }
+    if (check(buffer, [0x42, 0x4d])) {
+        return { ext: 'bmp', mime: 'image/bmp' };
+    }
+    if (check(buffer, [0xc5, 0xd0, 0xd3, 0xc6])) {
+        return { ext: 'eps', mime: 'application/eps' };
+    }
+    if (checkString(buffer, '8BPS')) {
+        return { ext: 'psd', mime: 'image/vnd.adobe.photoshop' };
+    }
+    if (checkString(buffer, '%PDF')) {
+        return { ext: 'pdf', mime: 'application/pdf' };
+    }
+    return null;
+}
+
+export { fileTypeFromBuffer };

package/esm/util/mergeRun.js

@@ -35,7 +35,13 @@ function canMerge(element) {
             if (childChild.tagName === 'w:t') {
                 hasText = true;
                 textHasSpace = childChild.getAttribute('xml:space') === 'preserve';
-                break;
+                if (textHasSpace) {
+                    break;
+                }
+            }
+            // 有 tab 的情况下不能合并
+            if (childChild.tagName === 'w:tab') {
+                return false;
             }
         }
     }

package/esm/util/replaceVar.d.ts

@@ -7,4 +7,10 @@ import Word from '../Word';
  * 替换单个文本变量
  */
 export declare function replaceT(word: Word, t: Element, data: any): void;
-export declare function replaceVar(word: Word, documentData: Document): void;
+/**
+ * 变量替换主入口
+ * @param word
+ * @param documentData
+ * @param replaceImage 是否替换掉图片，只有下载时才替换，避免性能问题
+ */
+export declare function replaceVar(word: Word, documentData: Document, replaceImage?: boolean): Promise<void>;