好吧 - 在edi9999和他的超酷图书馆的帮助下,我能够用我的文本变量和图像创建一个docx文档。
这里是我使用的代码: 的Javascript:
/*** importing all necessary scripts ***/
<script type="text/javascript" src="docxtemplater-master/libs/base64.js"></script>
<script type="text/javascript" src="docxtemplater-master/libs/jszip/jszip.js"></script>
<script type="text/javascript" src="docxtemplater-master/libs/jszip/jszip-load.js"></script>
<script type="text/javascript" src="docxtemplater-master/libs/jszip/jszip-inflate.js"></script>
<script type="text/javascript" src="docxtemplater-master/js/docxgen.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/*** my JSON object with the variables for setTemplateVars() ***/
<script type="text/javascript">
var JSON = { "articles": [
{ "title": "test-title", "first_name": "Paul", "last_name": "Alan", "phone": "555-nose", "fileName": "abc" },
{ "title": "test-title2", "first_name": "John", "last_name": "Doe", "phone": "555-abcd", "fileName": "bcd" }
]
};
</script>
<script type="text/javascript">
var xhrDoc = new XMLHttpRequest();
xhrDoc.open('GET', 'Example.docx', true);
if (xhrDoc.overrideMimeType) {
xhrDoc.overrideMimeType('text/plain; charset=x-user-defined');
}
xhrDoc.onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
window.docData = this.response;
}
};
xhrDoc.send();
var xhrImage = new XMLHttpRequest();
xhrImage.open('GET', 'dog.jpg', true);
if (xhrImage.overrideMimeType) {
xhrImage.overrideMimeType('text/plain; charset=x-user-defined');
}
xhrImage.onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
window.imgData = this.response;
}
};
xhrImage.send();
generateDoc = function (docData) {
var doc = new DocxGen(docData)
doc.setTemplateVars(
{ "first_name": JSON.articles[0]["first_name"],
"last_name": JSON.articles[0]["last_name"],
"phone": JSON.articles[0]["phone"],
"fileName": JSON.articles[0]["fileName"]
}
)
doc.applyTemplateVars()
imageList = doc.getImageList()
console.log(imageList);
doc.setImage(imageList[0].path, imgData);
doc.output()
}
</script>
HTML:
<button class="download_doc" onClick="generateDoc(window.docData)">download word docx with image</button>
Word模板:
{phone}
Product name: {first_name}
Product reference : {last_name}
*in the middle is an image*
Blabla: {fileName}
*here is another image*
好内容是没有当然的道理,但它作品。但仍然有一些问题留下(特别是对edi9999,我希望你能回答我请:)):
1.图像必须在同一台服务器上,你必须使用相对路径, 对? Link的似乎没有工作。我试过xhrImage.open('GET', 'http://link-to-an-image.com/image.jpg', true);
但没有成功。是否有可能使用外部链接来图像?
2. GET请求后面的控制台中有一个304错误(“未修改”)。这是正常的吗?
3.用来代替word文档中的图像的图像是否必须具有相同的尺寸(或至少是相同的纵横比)还是有任何选项变量可以使替换更灵活?例如:如果我想让图像在Word文档中显示完整宽度并获得具有不同宽高比的替换图像,是否可以保持该宽高比,并且只是增加Word文档中图像的高度?
4.如何使用多个图像进行更换?用xhrImage.open('GET', 'dog.jpg', true);
只打开一个图像。如何添加更多的图像到“imageList”以及如何确定顺序?
5。该库基于原型,通常会导致在一个文档中同时使用(jQuery + Prototype)框架的错误。但我试图使用jQuery函数,它的工作。你有没有在一个文档中使用你的库和jQuery的问题?
THX!但有可能只用上面的方法创建一个带有文本的工作文档文档。只是添加图片导致了问题。我试过phpdocx,它有可能创建一个带有文本和图像的文档文档。不幸的是,你不能格式化社区版本的phpDocx中的文本,其他版本非常昂贵:(http://www.phpdocx.com/documentation/features – user2718671
是的,这是真的,PHPDocx是非常昂贵的。一个使用JS的web应用程序,你可以看看我创建的库,https://github.com/edi9999/docxtemplater。它是一个模板(也就是说你不能从头开始创建一个词,但需要创建一个模板),但你可以看看这里的演示:http://javascript-ninja.fr/docxgenjs/examples/demo.html – edi9999
谢谢!你创建的工具似乎是强大和有用的。出来如何安装和如何使用我会试试看:) – user2718671