office-viewer 0.1.5 → 0.2.1

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*/];
+                }
+            });
+        });
     };
     /**
      * 打印功能
@@ -490,7 +534,7 @@ var Word = /** @class */ (function () {
                             return [2 /*return*/, null];
                         }
                         printDocument.write("<style>\n      html, body { margin:0; padding:0 }\n      @page { size: auto; margin: 0mm; }\n      </style>\n      <div id=\"print\"></div>");
-                        return [4 /*yield*/, this.render(printDocument.getElementById('print'), __assign({ page: true, pageWrap: false, pageShadow: false, pageMarginBottom: 0, pageWrapPadding: undefined, zoom: 1 }, this.renderOptions.printOptions))];
+                        return [4 /*yield*/, this.render(printDocument.getElementById('print'), __assign({ pageWrap: false, pageShadow: false, pageMarginBottom: 0, pageWrapPadding: undefined, zoom: 1 }, this.renderOptions.printOptions))];
                     case 1:
                         _a.sent();
                         setTimeout(function () {
@@ -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/renderStyle.js

@@ -21,7 +21,7 @@ function generateDefaultStyle(word) {
     }
     var hyphens = ((_a = word.settings) === null || _a === void 0 ? void 0 : _a.autoHyphenation) ? 'hyphens: auto;' : '';
     var classPrefix = word.getClassPrefix();
-    return "\n\n\n  /** docDefaults **/\n  .".concat(classPrefix, " {\n    --docx-theme-font-minorHAnsi: Calibri,  Helvetica, Arial, 'Helvetica Neue';\n    --docx-theme-font-minorEastAsia: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',\n    'Microsoft YaHei';\n  }\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\n    line-height: 1.5;\n    ").concat(hyphens, "\n  }\n\n  .").concat(classPrefix, " .justify:after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n\n  .").concat(classPrefix, " table {\n    border-spacing: 0;\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-p {\n    ").concat(defaultPStyle, "\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-r {\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
+    return "\n\n\n  /** docDefaults **/\n  .".concat(classPrefix, " {\n    --docx-theme-font-minorHAnsi: Calibri,  Helvetica, Arial, 'Helvetica Neue';\n    --docx-theme-font-minorEastAsia: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',\n    'Microsoft YaHei';\n  }\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\n    line-height: 1.5;\n    ").concat(hyphens, "\n  }\n\n  .").concat(classPrefix, " .justify {\n    text-align-last: left;\n  }\n\n  .").concat(classPrefix, " table {\n    border-spacing: 0;\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-p {\n    ").concat(defaultPStyle, "\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-r {\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
 }
 /**
  * 生成表格级别样式

package/esm/render/setElementStyle.js

@@ -9,8 +9,8 @@ function setElementStyle(word, element, properties) {
     }
     if (properties.cssStyle) {
         applyStyle(element, properties.cssStyle);
-        // 需要依赖这个 class 才能实现水平分布
-        // https://stackoverflow.com/a/21199162
+        // 目前默认最后一行用左对齐
+        // 这里用 class 的主要原因是方便用户自己覆盖，比如可能有语言需要右对齐
         if (properties.cssStyle['text-align'] === 'justify') {
             addClassName(element, 'justify');
         }

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/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>;