web-dev-qa-db-fra.com

Générer un document Word en JavaScript avec Docx.js?

J'essaie d'utiliser docx.js pour générer un document Word, mais je n'arrive pas à le faire fonctionner.

J'ai copié le code brut dans la console Google Chrome après avoir modifié la ligne 247 pour corriger une "erreur non définie" textAlign ""

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

Ce qui rend la fonction convertContent disponible. Le résultat est un objet, par ex.

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

Résulte en -

"{"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}"

J'ai copié 

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

dans Notepad ++ et l’enregistrez en tant que fichier avec une extension «docx», mais lorsque je l’ouvre dans MS Word, il indique «ne peut pas être ouvert car il y a un problème de contenu».

Me manque-t-il des attributs, des balises XML ou autre chose?

javascriptms-worddocx
14
Peter

Ce code ne peut pas fonctionner sur un JSFiddle en raison des appels ajaxCalls to local (tout ce qui se trouve dans le dossier blank) ou vous devez entrer tous les fichiers au format ByteArray et utiliser l'API jsFiddle echo: http: //doc.jsfiddle .net/use/echo.html

4
edi9999

Vous pouvez générer un document Docx à partir d'un modèle en utilisant docxtemplater (la bibliothèque que j'ai créée). 

Il peut remplacer les balises par leurs valeurs (comme un moteur de gabarit), mais également remplacer les images dans une version payante.

Voici une démonstration du moteur de modélisation: https://docxtemplater.com/demo/

21
edi9999

Vous pouvez trouver ce lien utile,

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

Une démo en ligne ici:

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

2
xyz

Je sais que c'est une question plus ancienne et que vous avez déjà une réponse, mais j'ai eu du mal à faire en sorte que cela fonctionne pendant un jour, alors j'ai pensé partager mes résultats. 

Comme vous, j'ai dû corriger le bogue textAlign en modifiant la ligne comme suit:

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

En outre, il ne traitait pas les commentaires HTML. Donc, j'ai dû ajouter la ligne suivante au-dessus de la vérification d'un noeud "#text" dans la boucle for:

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

Créer le docx était délicat, car il n’existait encore aucune documentation sur ce sujet. Mais en regardant à travers le code, je vois qu’il s’attend à ce que le HTML soit dans un objet File. Pour mes besoins, je voulais utiliser le code HTML que j'ai rendu, pas un fichier HTML que l'utilisateur doit sélectionner pour télécharger. J'ai donc dû le tromper en créant mon propre objet avec la même propriété qu'il cherchait et en le transmettant. Pour le sauvegarder sur le client, j'utilise FileSaver.js , qui nécessite un blob. J'ai inclus cette fonction qui convertit base64 en blob. Donc, mon code pour l'implémenter est le suivant:

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

En fin de compte, cela fonctionnerait pour des documents Word simples, mais pas très sophistiqué pour rien de plus. Je ne pouvais obtenir aucun rendu de mes styles et je n'ai même pas essayé de faire fonctionner les images. Depuis, j'ai abandonné cette approche et je recherche maintenant DocxgenJS ou une solution côté serveur.

1
adam0101

Vous procédez correctement, mais votre fichier n’est pas un fichier docx valide. Si vous examinez la fonction docx() dans docx.js, vous verrez qu'un fichier docx est en fait un fichier Zip contenant plusieurs fichiers XML.

0
Joshua Smith

J'utilise Open Xml SDK pour JavaScript.

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

Sur un serveur Web, j'ai essentiellement un nouveau fichier docx en tant que nouveau modèle . Lorsque l'utilisateur dans un navigateur clique sur le nouveau fichier docx, je vais récupérer le fichier docx vide en tant que modèle, le convertir en BASE64 et le renvoyer en réponse Ajax.

dans les scripts client, vous convertissez la chaîne BASE64 en tableau d'octets et en utilisant openxmlsdk.js pour charger le tableau d'octets en tant qu'objet javascript OpenXmlPackage.

une fois le package chargé, vous pouvez utiliser OpenXmlPart standard pour créer un document réel. (insertion d'image, création de table/ligne).

la dernière étape est de la diffuser à l'utilisateur final en tant que document. cette partie est liée à la sécurité. dans mon code, je le renvoie au serveur Web et est enregistré temporairement. et préparez une réponse http pour informer l'utilisateur final de le télécharger.

Vérifiez l'URL ci-dessus, il existe des exemples utiles de le faire en JavaScript.

0
Victor Xie