html docx js 空白 docx 问题
[英]html docx js blank docx issue
问题描述
I am trying to create docx file using the github project HTML-DOCX-JS but since I want to do this process locally I have downloaded the project and found that it has some issues.
我正在尝试使用 github 项目HTML-DOCX-JS创建 docx 文件，但由于我想在本地执行此过程，因此我已下载该项目并发现它存在一些问题。 I am able to edit in tinymce editor and when I press convert I do get docx file but its blank.我可以在 tinymce 编辑器中进行编辑，当我按下转换时，我确实得到了 docx 文件，但它是空白的。 There are some changes which I made to the sample.html file because the default project doesn't even give a docx on click.我对 sample.html 文件进行了一些更改，因为默认项目在单击时甚至不提供 docx。 Please check the below code and let me know what's causing the issue, no exceptions from JS as well.请检查下面的代码，让我知道是什么导致了问题，JS 也不例外。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-DOCX test</title>
<script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="vendor/FileSaver.js"></script>
<script src="../dist/html-docx.js"></script>
</head>
<body>
<p>Enter/paste your document here:</p>
<textarea id="content" cols="60" rows="10"></textarea>
<div class="page-orientation">
<span>Page orientation:</span>
<label><input type="radio" name="orientation" value="portrait" checked>Portrait</label>
<label><input type="radio" name="orientation" value="landscape">Landscape</label>
</div>
<button id="convert">Convert</button>
<div id="download-area"></div>
<script>
tinymce.init({
selector: '#content',
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen fullpage",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | " +
"alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | " +
"link image"
});
document.getElementById('convert').addEventListener('click', function(e) {
e.preventDefault();
var content = tinymce.get('content').getContent();
var orientation = document.querySelector('.page-orientation input:checked').value;
var converted = htmlDocx.asBlob(content, {orientation: orientation});
saveAs(converted, 'test.docx');
var link = document.createElement('a');
link.href = URL.createObjectURL(converted);
link.download = 'document.docx';
link.appendChild(
document.createTextNode('Click here if your download has not started automatically'));
var downloadArea = document.getElementById('download-area');
downloadArea.innerHTML = '';
downloadArea.appendChild(link);
});
</script>
</body>
</html>
The file structure is something like this: http://i.stack.imgur.com/qBgGW.png文件结构是这样的： http : //i.stack.imgur.com/qBgGW.png
1 个解决方案
解决方案1
1 2019-10-15 10:39:08
The NPM library html-docx-js uses " altChunk " markup to embed a raw HTML document within a Docx file. NPM 库html-docx-js使用“ altChunk ”标记将原始 HTML 文档嵌入到 Docx 文件中。
Unfortunately, this is not supported on MacOS or Google Drive, which is why you're seeing a blank document instead.不幸的是，这在 MacOS 或 Google Drive 上不受支持，这就是为什么您看到的是空白文档。 Open it in Word on Windows (or even online at Office365) for it to work.在 Windows 上的 Word 中打开它（甚至在 Office365 上在线）以使其工作。
解决方案2
-1 2015-10-22 00:25:47
After getting the content inside tiny mce editor you must construct a full html document and then send it to htmlDocx.asBlob() function or the document will display blank. 在微型mce编辑器中获取内容后，您必须构建一个完整的html文档，然后将其发送到htmlDocx.asBlob（）函数，否则该文档将显示为空白。
Your code should look like this: 您的代码应如下所示：
var content = tinymce.get('content').getContent();
var orientation = document.querySelector('.page-orientation input:checked').value;
//Build a full html document including doctype
var html_document = '<!DOCTYPE html><html><head><title></title>';
html_document += '</head><body>' + content + '</body></html>';
var converted = htmlDocx.asBlob(html_document, {orientation: orientation});
saveAs(converted, 'test.docx');
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.