{"id":2017,"date":"2016-02-04T00:35:30","date_gmt":"2016-02-04T00:35:30","guid":{"rendered":"http:\/\/www.ericwhite.com\/home2\/bm8qcmjy\/public_html\/blog\/?page_id=2017"},"modified":"2016-02-04T00:36:24","modified_gmt":"2016-02-04T00:36:24","slug":"overview-of-the-open-xml-sdk-for-javascript-api","status":"publish","type":"page","link":"https:\/\/www.ericwhite.com\/blog\/overview-of-the-open-xml-sdk-for-javascript-api\/","title":{"rendered":"Overview of the Open XML SDK for JavaScript API"},"content":{"rendered":"<p class=\"apiPara\"><span class=\"Back\"><a class=\"Back\" href=\"https:\/\/www.ericwhite.com\/blog\/open-xml-sdk-for-javascript\/\">Return to the<br \/>Open XML SDK for JavaScript<br \/>Developer Center<\/a><\/span>There are essentially three &lsquo;classes&rsquo; in the API.&nbsp; Of<br \/>\ncourse, JavaScript does not have classes as such, but there are three types of<br \/>\nobjects in the API that can be described as classes:<\/p>\n<ul>\n<li class=\"apiLi\"><b>OpenXmlPackage<\/b> &ndash; this class abstracts a package, whether it be a WordprocessingML document, a SpreadsheetML document, or a PresentationML document.  This class contains the list of parts, and does some housekeeping associated with the [Content_Types].xml file in the package.  This class also contains some methods for maintaining the list of relationships from the package to the main parts, i.e. the main document part, the workbook part, or the presentation part.  It also contains the functionality to open a package, and to serialize the package to base64 or to Flat OPC.<\/li>\n<li class=\"apiLi\"><b>OpenXmlPart<\/b> &ndash; this class abstracts the parts in a package.  It contains the URI of the part, the content type of the part, and the part type (whether it is binary or XML).  It also contains some methods for maintaining the list of relationships from this part to other parts.<\/li>\n<li class=\"apiLi\"><b>OpenXmlRelationship<\/b> &ndash; this class contains the information about a relationship, whether it be from the package to a part, or from a part to another part.  It contains the relationship ID, the relationship type, whether the relationship is internal or external, and the target of the relationship. There is no functionality associated with <b>OpenXmlRelationship<\/b> objects &#8211; all functionality to add or delete relationships is in the <b>OpenXmlPackage<\/b> and <b>OpenXmlPart<\/b> objects. &nbsp;This type is used only for return values of the various functions that retrieve relationships from the package and parts.<\/li>\n<\/ul>\n<h2 class=\"apiSubHead\">Opening a Word Document, a Spreadsheet, or a Presentation<\/h2>\n<p class=\"apiPara\">To open an Open XML file, you pass either a binary document<br \/>\nthat is encoded in base64 ASCII, or you pass a Flat OPC document as a string.&nbsp;<br \/>\nFor instance, to open a DOCX that is encoded with base64 ASCII, the code would<br \/>\nlook as follows:<\/p>\n<pre class=\"prettyprint\">\/\/ Open a document that is stored as a base64 string.\r\nvar doc = new openXml.OpenXmlPackage(document_base64);<\/pre>\n<p class=\"apiPara\">Opening a document that is stored as XML in the Flat OPC<br \/>\nform is exactly the same:<\/p>\n<pre class=\"prettyprint\">\/\/ Open a document that is stored as XML in the Flat OPC format.\r\nvar doc = new openXml.OpenXmlPackage(document_flatOpc);<\/pre>\n<p class=\"apiPara\">There are several ways to get your hands on an base64<br \/>\nencoded DOCX, XLSX, or PPTX:<\/p>\n<ol>\n<li class=\"apiLi\">You can enable the end-user to click on a small flash control (that looks like a button), which loads the file from the file system and passes the base64 encoded ASCII to your JavaScript code.<\/li>\n<li class=\"apiLi\">You can manually convert a binary document to base64 encoded ASCII, and then transform the long string into code to initialize a JavaScript variable.  This is a convenient way to store a template document or spreadsheet, which you will then modify programmatically and then enable the end-user to save locally.<\/li>\n<li class=\"apiLi\">You can request the document from the web server using an httpRequest.  The ajax method of jQuery is a convenient way to do this.<\/li>\n<li class=\"apiLi\">When using Node.js, you can simply open the DOCX, XLSX, or PPTX.  Node.js doesn&rsquo;t have or need the same restrictions as JavaScript code that is running in the browser.<\/li>\n<li class=\"apiLi\">When writing an Office Client App for Word 2013, or when writing a SharePoint 2013 App, you can retrieve documents from document libraries.<\/li>\n<li class=\"apiLi\">Windows 8 &lsquo;Store&rsquo; applications have their own means for finding and opening documents.   I&rsquo;ll cover these techniques when I write the Windows 8 blog-posts and screen-casts.<\/li>\n<\/ol>\n<p class=\"apiPara\">Once you have opened the document, you typically will &lsquo;dot&rsquo;<br \/>\ninto one of the convenience functions that retrieve the main part of the<br \/>\npackage.&nbsp; For example, if you have opened a <b>WordprocessingML<\/b> document,<br \/>\nyou &lsquo;dot&rsquo; into the <b>mainDocumentPart<\/b> function:<\/p>\n<pre class=\"prettyprint\">var doc = new openXml.OpenXmlPackage(openXmlDocument);\r\nvar mainPart = doc.mainDocumentPart();<\/pre>\n<p class=\"apiPara\">After you have navigated to the part that you want to query<br \/>\nor modify, you then call the <b>getXDocument<\/b> method, which retrieves the <b>XDocument<\/b><br \/>\nobject (from LINQ to XML for JavaScript).&nbsp; You can either query the document or<br \/>\nyou can modify the document.&nbsp; The following code shows opening a document,<br \/>\ncreating a new paragraph element, finding the <b>w:body<\/b> part, finding the<br \/>\nlast paragraph in the <b>w:body<\/b> part, and then inserting the new paragraph<br \/>\nelement after the last paragraph.<\/p>\n<pre class=\"prettyprint\">\/\/ Open the document, which is stored as a base64 string.\r\nvar doc = new openXml.OpenXmlPackage(openedFileData);\r\n\r\n\/\/ Create a paragraph.\r\nvar p = new XElement(W.p,\r\n    new XElement(W.r,\r\n        new XElement(W.t, &quot;Hello Open XML World&quot;)));\r\n\r\n\/\/ Append the paragraph to the document.\r\nvar body = doc.mainDocumentPart().getXDocument().root.element(W.body);\r\nvar lastPara = body.elements(W.p).lastOrDefault();\r\nif (lastPara !== null) {\r\n    lastPara.addAfterSelf(p);\r\n}<\/pre>\n<p class=\"apiPara\">When you modify the <b>XDocument<\/b> object that you<br \/>\nretrieve using the <b>getXDocument<\/b> method, your changes will be<br \/>\nautomatically included when you serialize the document to either a DOCX in<br \/>\nbase64 encoded ASCII, or when you serialize to XML in the Flat OPC format.<\/p>\n<p class=\"apiPara\">Once you have opened a document, spreadsheet, or<br \/>\npresentation, you can also modify the package in the typical ways you need to<br \/>\ndo with Open XML &ndash; you can add or delete relationships, and add or delete<br \/>\nparts.<\/p>\n<p class=\"apiPara\">When you have made all desired modifications to the package,<br \/>\nyou can then serialize to XML in the Flat OPC form:<\/p>\n<pre class=\"prettyprint\">var flatOpcString = doc.saveToFlatOpc();<\/pre>\n<p class=\"apiPara\">You can also, of course, serialize to a binary DOCX, XLSX,<br \/>\nor PPTX in base64 encoded ASCII:<\/p>\n<pre class=\"prettyprint\">var b64string = doc.saveToBase64();<\/pre>\n<p class=\"apiPara\">There are several ways to save the Flat OPC or the base64<br \/>\nencoded DOCX, XLSX, or PPTX:<\/p>\n<ol>\n<li class=\"apiLi\">You can enable the end-user to click on a small flash control (that looks like a button), which opens up a File Save-As dialog.  The user can navigate to their desired location and save the DOCX or Flat OPC to their local storage.<\/li>\n<li class=\"apiLi\">You can use httpRequest to send the document back to your web server.<\/li>\n<li class=\"apiLi\">If using Node.Js, you can simply write code to save to the file system.<\/li>\n<li class=\"apiLi\">When writing a Word 2013 App, you can replace the selection with the newly serialized Flat OPC.<\/li>\n<li class=\"apiLi\">When writing an Office Client or SharePoint App, you can serialize to a document library.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Return to theOpen XML SDK for JavaScriptDeveloper CenterThere are essentially three &lsquo;classes&rsquo; in the API.&nbsp; Of course, JavaScript does not have classes as such, but there are three types of objects in the API that can be described as classes: OpenXmlPackage &ndash; this class abstracts a package, whether it be a WordprocessingML document, a SpreadsheetML [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_s2mail":"","footnotes":""},"class_list":["post-2017","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/pages\/2017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/comments?post=2017"}],"version-history":[{"count":2,"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/pages\/2017\/revisions"}],"predecessor-version":[{"id":2019,"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/pages\/2017\/revisions\/2019"}],"wp:attachment":[{"href":"https:\/\/www.ericwhite.com\/blog\/wp-json\/wp\/v2\/media?parent=2017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}