如何使 Docxtemplater.js 在不了解 Node/Browserify/npm 等的情况下在浏览器上工作?
How to make Docxtemplater.js work on browser without any knowledge of Node/Browserify/npm and such?
我想让 Docxtemplater.js 在浏览器上工作。
不幸的是,我不知道这些东西,如Node.js、Browserify.js、"npm"、"bower",以及出现在所有那些好东西中的那种东西和很酷的现代 JS 库。我想了解它们,但在未来......现在我只想让这个 Docxtemplater.js 工作。
在页面底部,他们展示了如何使用 npm,但我不想那样,所以我去了 Quickstart In The Browser。我一定是做错了什么,因为它不起作用。
这是我所做的:
我创建了一个名为 testpage.html
的文件,内容如下:
<html><body>
<script src="build/docxtemplater.js"></script>
<script src="vendor/FileSaver.min.js"></script>
<script src="vendor/jszip-utils.js"></script>
<script>
var loadFile = function(url,callback) {
JSZipUtils.getBinaryContent(url,callback);
}
loadFile("examples/tagExample.docx", function(err, content) {
if (err) { throw e };
doc = new Docxtemplater(content);
doc.setData({
"first_name": "Hipp",
"last_name": "Edgar",
"phone": "0652455478",
"description": "New Website"
}); //set the templateVariables
doc.render(); //apply them (replace all occurences of {first_name} by Hipp, ...)
out=doc.getZip().generate({type:"blob"}); //Output the document using Data-URI
saveAs(out,"output.docx");
});
</script>
</body></html>
我创建了一个文件夹build
并将文件docxtemplater.js
放在那里,从here, specifically the raw file docxtemplater.v2.1.3.min.js下载(当然我重命名为docxtemplater.js
) .
我创建了一个文件夹 vendor
并将文件 FileSaver.min.js
和 jszip-utils.js
放在那里,这两个文件都来自 here.
我创建了一个文件夹 examples
并将文件 tagExample.docx
放在那里,取自 here。
这正是我所做的。我没有添加任何其他文件或文件夹,或任何东西。
然后,我在 Windows 上用我的 Firefox 47.0.1 打开文件 testpage.html
7. 打开控制台后,我收到以下错误消息:
ReferenceError: Docxtemplater is not defined
- 在这一行:doc = new Docxtemplater(content);
怎么了?如何解决这个问题?
我找到了解决方案:只需将 new Docxtemplater(content)
替换为 new Docxgen(content)
。
只有在 downloading the JS build directly from github 时才会发生这种情况,就像我一样。
我opened an issue about it, and now this is properly documented in Readme.md:
If you download the JS from there, you should use new Docxgen() instead of new Docxtemplater(), because I do not want to bring in a breaking change on a minor version change in the docxtemplater-build repository.
好像"Docxgen"是图书馆的旧名字,现在更名为"Docxtemplater"。
我想让 Docxtemplater.js 在浏览器上工作。
不幸的是,我不知道这些东西,如Node.js、Browserify.js、"npm"、"bower",以及出现在所有那些好东西中的那种东西和很酷的现代 JS 库。我想了解它们,但在未来......现在我只想让这个 Docxtemplater.js 工作。
在页面底部,他们展示了如何使用 npm,但我不想那样,所以我去了 Quickstart In The Browser。我一定是做错了什么,因为它不起作用。
这是我所做的:
我创建了一个名为
testpage.html
的文件,内容如下:<html><body> <script src="build/docxtemplater.js"></script> <script src="vendor/FileSaver.min.js"></script> <script src="vendor/jszip-utils.js"></script> <script> var loadFile = function(url,callback) { JSZipUtils.getBinaryContent(url,callback); } loadFile("examples/tagExample.docx", function(err, content) { if (err) { throw e }; doc = new Docxtemplater(content); doc.setData({ "first_name": "Hipp", "last_name": "Edgar", "phone": "0652455478", "description": "New Website" }); //set the templateVariables doc.render(); //apply them (replace all occurences of {first_name} by Hipp, ...) out=doc.getZip().generate({type:"blob"}); //Output the document using Data-URI saveAs(out,"output.docx"); }); </script> </body></html>
我创建了一个文件夹
build
并将文件docxtemplater.js
放在那里,从here, specifically the raw file docxtemplater.v2.1.3.min.js下载(当然我重命名为docxtemplater.js
) .我创建了一个文件夹
vendor
并将文件FileSaver.min.js
和jszip-utils.js
放在那里,这两个文件都来自 here.我创建了一个文件夹
examples
并将文件tagExample.docx
放在那里,取自 here。
这正是我所做的。我没有添加任何其他文件或文件夹,或任何东西。
然后,我在 Windows 上用我的 Firefox 47.0.1 打开文件 testpage.html
7. 打开控制台后,我收到以下错误消息:
ReferenceError: Docxtemplater is not defined
- 在这一行:doc = new Docxtemplater(content);
怎么了?如何解决这个问题?
我找到了解决方案:只需将 new Docxtemplater(content)
替换为 new Docxgen(content)
。
只有在 downloading the JS build directly from github 时才会发生这种情况,就像我一样。
我opened an issue about it, and now this is properly documented in Readme.md:
If you download the JS from there, you should use new Docxgen() instead of new Docxtemplater(), because I do not want to bring in a breaking change on a minor version change in the docxtemplater-build repository.
好像"Docxgen"是图书馆的旧名字,现在更名为"Docxtemplater"。