Tạo tài liệu Word bằng JavaScript với Docx.js?

Question

Tôi đang cố gắng sử dụng docx.js (Github repo) để tạo tài liệu Word nhưng tôi dường như không thể làm cho nó hoạt động.

tôi đã sao chép mã thô vào giao diện điều khiển của Google Chrome sau khi sửa đổi dòng 247 để sửa chữa một "lỗi không xác định 'textAlign"

if (inNode.style && inNode.style.textAlign){..} 

Mà làm cho chức năng convertContent sẵn. Kết quả là một đối tượng, ví dụ:

JSON.stringify(convertContent($('<p>Word!</p>)[0])) 

Kết quả trong -

"{"string": 
     "<w:body> 
      <w:p> 
       <w:r> 
        <w:t xml:space=\"preserve\">Word!</w:t> 
       </w:r> 
      </w:p> 
     </w:body>" 
,"charSpaceCount":5 
,"charCount":5, 
"pCount":1}" 

tôi sao chép

<w:body> 
    <w:p> 
     <w:r> 
      <w:t xml:space="preserve">Word!</w:t> 
     </w:r> 
    </w:p> 
</w:body> 

vào Notepad ++ và lưu nó như một tập tin với phần mở rộng của 'docx' nhưng khi tôi mở nó trong MS Word nhưng nó nói 'không thể được mở ra bởi vì có vấn đề với nội dung'.

Tôi có thiếu một số thuộc tính hoặc thẻ XML hay gì đó không?

Answer 1

Mã này không thể làm việc trên một JSFiddle vì ajaxCalls các tập tin địa phương (tất cả mọi thứ đó là trong thư mục blank), hoặc bạn nên nhập tất cả các file ở định dạng ByteArray và sử dụng jsFiddle API vang: http://doc.jsfiddle.net/use/echo.html

Answer 2

Bạn đang thực hiện việc viết mã đúng, nhưng tệp của bạn không phải là tệp docx hợp lệ. Nếu bạn xem xét chức năng docx() trong docx.js, bạn sẽ thấy tệp docx thực sự là một tệp zip chứa một số tệp xml.

Answer 3

Bạn có thể tạo Tài liệu Docx từ mẫu bằng cách sử dụng docxtemplater (thư viện mà tôi đã tạo).

Thẻ có thể thay thế thẻ theo giá trị của chúng (như công cụ tạo mẫu) và cũng thay thế hình ảnh.

Đây là một bản demo của cỗ máy template: http://javascript-ninja.fr/docxtemplater/v1/examples/demo.html

Answer 4

Tôi biết đây là một câu hỏi cũ và bạn đã có một câu trả lời, nhưng tôi phải vật lộn việc này để làm việc trong một ngày, vì vậy tôi nghĩ rằng tôi muốn chia sẻ kết quả của tôi.

Cũng giống như bạn, tôi đã phải sửa chữa các lỗi textAlign bằng cách thay đổi dòng này:

if (inNode.style && inNode.style.textAlign) 

Ngoài ra, nó không giải quyết yêu cầu HTML. Vì vậy, tôi đã phải thêm dòng sau phía trên séc cho một nút "#text" trong for loop:

if (inNodeChild.nodeName === '#comment') continue; 

Để tạo docx là khó khăn vì không hoàn toàn không có tài liệu hướng dẫn về điều này như được nêu ra. Nhưng nhìn qua mã, tôi thấy rằng nó đang mong đợi HTML được trong một đối tượng File. Vì mục đích của tôi, tôi muốn sử dụng HTML mà tôi đã hiển thị, chứ không phải một số tệp HTML mà người dùng phải chọn để tải lên. Vì vậy, tôi đã phải lừa nó bằng cách làm cho đối tượng của riêng tôi với cùng một tài sản mà nó đang tìm kiếm và vượt qua nó. Để lưu nó cho khách hàng, tôi sử dụng FileSaver.js, đòi hỏi một blob. Tôi included this function chuyển đổi base64 thành một đốm màu.Vì vậy, mã của tôi để thực hiện nó là:

var result = docx({ DOM: $('#myDiv')[0] }); 
var blob = b64toBlob(result.base64, "application/vnd.openxmlformats-officedocument.wordprocessingml.document"); 
saveAs(blob, "test.docx"); 

Cuối cùng, điều này sẽ làm việc cho các tài liệu Word đơn giản, nhưng không gần như phức tạp hơn nữa. Tôi không thể có được bất kỳ phong cách của tôi để render và tôi thậm chí không cố gắng để có được hình ảnh làm việc. Tôi đã từ bỏ cách tiếp cận này và hiện đang nghiên cứu DocxgenJS hoặc một số giải pháp phía máy chủ.

Answer 5

Bạn có thể tìm thấy liên kết này hữu ích,

http://evidenceprime.github.io/html-docx-js/

Một demo trực tuyến ở đây:

http://evidenceprime.github.io/html-docx-js/test/sample.html

Answer 6

Tôi đang sử dụng mở SDK Xml cho JavaScript.

http://ericwhite.com/blog/open-xml-sdk-for-javascript/

Về cơ bản, trên máy chủ web, tôi có một tập tin docx rỗng như mẫu mới. khi người dùng trong trình duyệt nhấp vào tệp docx mới, tôi sẽ truy xuất tệp docx trống dưới dạng mẫu, chuyển đổi nó thành BASE64 và trả về dưới dạng phản hồi Ajax.

trong tập lệnh khách, bạn chuyển đổi chuỗi BASE64 thành byte và sử dụng openxmlsdk.js để tải mảng byte dưới dạng đối tượng javascript OpenXmlPackage.

khi bạn đã tải gói, bạn có thể sử dụng OpenXmlPart thông thường để tạo tài liệu thực. (chèn hình ảnh, tạo bảng/hàng).

bước cuối cùng là phát trực tuyến cho người dùng cuối dưới dạng tài liệu. phần này là an ninh liên quan. trong mã của tôi, tôi gửi nó trở lại máy chủ web và được lưu tạm thời. và chuẩn bị phản hồi http để thông báo cho người dùng cuối tải xuống.

Kiểm tra URL ở trên, có các mẫu hữu ích khi thực hiện việc này trong JavaScript.