好吧 - 在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