want to access this js from our js under app/tenant/view/ind #2368

0

avanekar02 created 7 years ago

/* PPTX Units are "DXA" (except for font sizing) ....: There are 1440 DXA per inch. 1 inch is 72 points. 1 DXA is 1/20th's of a point (20 DXA is 1 point). ....: There is also something called EMU's (914400 EMUs is 1 inch, 12700 EMUs is 1pt). SEE: <a class="postlink" href="https://startbigthinksmall.wordpress.com/2010/01/04/points-inches-and-emus-measuring-units-in-office-open-xml/">https://startbigthinksmall.wordpress.co ... -open-xml/</a> | OBJECT LAYOUTS: 16x9 (10" x 5.625"), 16x10 (10" x 6.25"), 4x3 (10" x 7.5"), Wide (13.33" x 7.5") | REFS: * "Structure of a PresentationML document (Open XML SDK)" * @see: <a class="postlink" href="https://msdn.microsoft.com/en-us/library/office/gg278335.aspx">https://msdn.microsoft.com/en-us/librar ... 78335.aspx</a> * TableStyleId enumeration * @see: <a class="postlink" href="https://msdn.microsoft.com/en-us/library/office/hh273476(v=office.14">https://msdn.microsoft.com/en-us/librar ... =office.14</a>).aspx */

// Polyfill for IE11 (<a class="postlink" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger">https://developer.mozilla.org/en-US/doc ... /isInteger</a>) Number.isInteger = Number.isInteger || function(value) { return typeof value === "number" && isFinite(value) && Math.floor(value) === value; };

// Detect Node.js var NODEJS = ( typeof module !== 'undefined' && module.exports );

// [Node.js] <script> includes if ( NODEJS ) { var gObjPptxMasters = require('../dist/pptxgen.masters.js'); var gObjPptxShapes = require('../dist/pptxgen.shapes.js'); }

// A: Create internal pptx object
var gObjPptx = {};

// B: Set Presentation Property Defaults
gObjPptx.title = 'PptxGenJS Presentation';
gObjPptx.fileName = 'Presentation';
gObjPptx.fileExtn = '.pptx';
gObjPptx.pptLayout = LAYOUTS['LAYOUT_16x9'];
gObjPptx.slides = [];

// C: Expose shape library to clients
this.shapes  = (typeof gObjPptxShapes  !== 'undefined') ? gObjPptxShapes  : BASE_SHAPES;
this.masters = (typeof gObjPptxMasters !== 'undefined') ? gObjPptxMasters : {};

// D: Check for associated .js files and provide warings about anything missing
if ( typeof gObjPptxShapes === 'undefined' ) gObjPptxShapes = BASE_SHAPES;


/**
 * Export the .pptx file (using saveAs - dep. filesaver.js)
 */
function doExportPresentation() {
	var intSlideNum = 0, intRels = 0;

	// STEP 1: Create new JSZip file
	var zip = new JSZip();

	// STEP 2: Add all required folders and files
	zip.folder("_rels");
	zip.folder("docProps");
	zip.folder("ppt").folder("_rels");
	zip.folder("ppt/media");
	zip.folder("ppt/slideLayouts").folder("_rels");
	zip.folder("ppt/slideMasters").folder("_rels");
	zip.folder("ppt/slides").folder("_rels");
	zip.folder("ppt/theme");

	zip.file("[Content_Types].xml", makeXmlContTypes());
	zip.file("_rels/.rels", makeXmlRootRels());
	zip.file("docProps/app.xml", makeXmlApp());
	zip.file("docProps/core.xml", makeXmlCore());
	zip.file("ppt/_rels/presentation.xml.rels", makeXmlPresentationRels());

	// Create a Layout/Master/Rel/Slide file for each SLIDE
	for ( var idx=0; idx&lt;gObjPptx.slides.length; idx++ ) {
		intSlideNum++;
		zip.file(&quot;ppt/slideLayouts/slideLayout&quot;+ intSlideNum +&quot;.xml&quot;, makeXmlSlideLayout( intSlideNum ));
		zip.file(&quot;ppt/slideLayouts/_rels/slideLayout&quot;+ intSlideNum +&quot;.xml.rels&quot;, makeXmlSlideLayoutRel( intSlideNum ));
		zip.file(&quot;ppt/slides/slide&quot;+ intSlideNum +&quot;.xml&quot;, makeXmlSlide(gObjPptx.slides[idx]));
		zip.file(&quot;ppt/slides/_rels/slide&quot;+ intSlideNum +&quot;.xml.rels&quot;, makeXmlSlideRel( intSlideNum ));
	}
	zip.file(&quot;ppt/slideMasters/slideMaster1.xml&quot;, makeXmlSlideMaster());
	zip.file(&quot;ppt/slideMasters/_rels/slideMaster1.xml.rels&quot;, makeXmlSlideMasterRel());

	// Add all images
	for ( var idx=0; idx&lt;gObjPptx.slides.length; idx++ ) {
		for ( var idy=0; idy&lt;gObjPptx.slides[idx].rels.length; idy++ ) {
			var id = gObjPptx.slides[idx].rels[idy].rId - 1;
			var data = gObjPptx.slides[idx].rels[idy].data;
			var extn = gObjPptx.slides[idx].rels[idy].extn;

			// A: Users will undoubtedly pass in string in various formats, so modify as needed
			if      ( data.indexOf(&#39;,&#39;) == -1 &amp;&amp; data.indexOf(&#39;;&#39;) == -1 ) data = &#39;image/png;base64,&#39;+data;
			else if ( data.indexOf(&#39;,&#39;) == -1 ) data = &#39;image/png;base64,&#39;+data;
			else if ( data.indexOf(&#39;;&#39;) == -1 ) data = &#39;image/png;&#39;+data;

			// B: Grab base64 encoding header (ex: &quot;data:image/png;base64&quot;)
			var header = data.substring(0, data.indexOf(&quot;,&quot;));

			// C: Set content and trim the leading base64 header (&#39;data:image/png;base64,&#39;) JSZip only needs the data after &#39;,&#39; (will error otherwiose)
			var content = data.substring(data.indexOf(&quot;,&quot;) + 1);

			// D: Add image
			zip.file( &quot;ppt/media/image&quot;+id+&quot;.&quot;+extn, content, {base64:true} );
		}
	}

	zip.file(&quot;ppt/theme/theme1.xml&quot;, makeXmlTheme());
	zip.file(&quot;ppt/presentation.xml&quot;, makeXmlPresentation());
	zip.file(&quot;ppt/presProps.xml&quot;,    makeXmlPresProps());
	zip.file(&quot;ppt/tableStyles.xml&quot;,  makeXmlTableStyles());
	zip.file(&quot;ppt/viewProps.xml&quot;,    makeXmlViewProps());

	// STEP 3: Push the PPTX file to browser
	var strExportName = ((gObjPptx.fileName.toLowerCase().indexOf(&#39;.ppt&#39;) &gt; -1) ? gObjPptx.fileName : gObjPptx.fileName+gObjPptx.fileExtn);
	if ( NODEJS ) {
		zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content); });
	}
	else {
		zip.generateAsync({type:'blob'}).then(function(content){ saveAs(content, strExportName); });
	}
}

function componentToHex(c) {
	var hex = c.toString(16);
	return hex.length == 1 ? "0" + hex : hex;
}

/**
 * DESC: Used by `addSlidesForTable()` to convert RGB colors from jQuery selectors to Hex for Presentation colors
 */
function rgbToHex(r, g, b) {
	if (! Number.isInteger(r)) { try { console.warn('Integer expected!'); } catch(ex){} }
	return (componentToHex(r) + componentToHex(g) + componentToHex(b)).toUpperCase();
}

function inch2Emu(inches) {
	// FIRST: Provide Caller Safety: Numbers may get conv&lt;-&gt;conv during flight, so be kind and do some simple checks to ensure inches were passed
	// Any value over 100 damn sure isnt inches, must be EMU already, so just return it
	if (inches > 100) return inches;
	if ( typeof inches == 'string' ) inches = Number( inches.replace(/in*/gi,'') );
	return Math.round(EMU * inches);
}



				// C: Add padding [margin] (if any)
				// NOTE: Margins translate: px->pt 1:1 (e.g.: a 20px padded cell looks the same in PPTX as 20pt Text Inset/Padding)
				if ( $(cell).css('padding-left') ) {
					objOpts.marginPt = [];
					$.each(['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],function(i,val){
						objOpts.marginPt.push( Math.round($(cell).css(val).replace(/\D/gi,'') * ONEPT) );
					});
				}

				// D: Add colspan (if any)
				if ( $(cell).attr('colspan') ) objOpts.colspan = $(cell).attr('colspan');

				// E: Add border (if any)
				if ( $(cell).css('border-top-width') || $(cell).css('border-right-width') || $(cell).css('border-bottom-width') || $(cell).css('border-left-width') ) {
					objOpts.border = [];
					$.each(['top','right','bottom','left'], function(i,val){
						var intBorderW = Math.round( Number($(cell).css('border-'+val+'-width').replace('px','')) );
						var arrRGB = [];
						arrRGB = $(cell).css('border-'+val+'-color').replace(/\s+/gi,'').replace('rgba(','').replace('rgb(','').replace(')','').split(',');
						var strBorderC = rgbToHex( Number(arrRGB[0]), Number(arrRGB[1]), Number(arrRGB[2]) );
						objOpts.border.push( {pt:intBorderW, color:strBorderC} );
					});
				}

				// F: Massage cell text so we honor linebreak tag as a line break during line parsing
				var $cell2 = $(cell).clone();
				$cell2.html( $(cell).html().replace(/&lt;br[^&gt;]*>/gi,'\n') );

				// LAST: Add cell
				arrObjTabCells.push({
					text: $.trim( $cell2.text() ),
					opts: objOpts
				});
			});
			switch (val) {
				case 'thead': arrObjTabHeadRows.push( arrObjTabCells ); break;
				case 'tbody': arrObjTabBodyRows.push( arrObjTabCells ); break;
				case 'tfoot': arrObjTabFootRows.push( arrObjTabCells ); break;
				default:
			}
		});
	});

	// STEP 4: Paginate data: Iterate over all table rows, divide into slides/pages based upon the row height>overall height
	$.each([arrObjTabHeadRows,arrObjTabBodyRows,arrObjTabFootRows], function(iTab,tab){
		var currRow = [];
		$.each(tab, function(iRow,row){
			// A: Reset ROW variables
			var arrCellsLines = [], arrCellsLineHeights = [], emuRowH = 0, intMaxLineCnt = 0, intMaxColIdx = 0;

			// B: Parse and store each cell's text into line array (*MAGIC HAPPENS HERE*)
			$(row).each(function(iCell,cell){
				// 1: Create a cell object for each table column
				currRow.push({ text:'', opts:cell.opts });

				// 2: Parse cell contents into lines (**MAGIC HAPENSS HERE**)
				var lines = parseTextToLines($.trim(cell.text), cell.opts.font_size, (arrColW[iCell]/ONEPT));
				arrCellsLines.push( lines );

				// 3: Keep track of max line count within all row cells
				if ( lines.length > intMaxLineCnt ) { intMaxLineCnt = lines.length; intMaxColIdx = iCell; }
			});

			// C: Calculate Line-Height
			// FYI: Line-Height =~ font-size [px~=pt] * 1.65 / 100 = inches high
			// FYI: 1px = 14288 EMU (0.156 inches) @96 PPI - I ended up going with 20000 EMU as margin spacing needed a bit more than 1:1
			$(row).each(function(iCell,cell){
				var lineHeight = inch2Emu(cell.opts.font_size * 1.65 / 100);
				if ( Array.isArray(cell.opts.marginPt) && cell.opts.marginPt[0] ) lineHeight += cell.opts.marginPt[0] / intMaxLineCnt;
				if ( Array.isArray(cell.opts.marginPt) && cell.opts.marginPt[2] ) lineHeight += cell.opts.marginPt[2] / intMaxLineCnt;
				arrCellsLineHeights.push( Math.round(lineHeight) );
			});

			// D: AUTO-PAGING: Add text one-line-a-time to this row's cells until: lines are exhausted OR table H limit is hit
			for (var idx=0; idx&lt;intMaxLineCnt; idx++) {
				// 1: Add the current line to cell
				for (var col=0; col&lt;arrCellsLines.length; col++) {
					// A: Commit this slide to Presenation if table Height limit is hit
					if ( emuTabCurrH + arrCellsLineHeights[intMaxColIdx] &gt; emuSlideTabH ) {
						// 1: Add the current row to table
						// NOTE: Edge cases can occur where we create a new slide only to have no more lines
						// ....: and then a blank row sits at the bottom of a table!
						// ....: Hence, we very all cells have text before adding this final row.
						$.each(currRow, function(i,cell){
							if (cell.text.length > 0 ) {
								// IMPORTANT: use jQuery extend (deep copy) or cell will mutate!!
								arrRows.push( $.extend(true, [], currRow) );
								return false; // break out of .each loop
							}
						});
						// 2: Add new Slide with current array of table rows
						arrObjSlides.push( $.extend(true, [], arrRows) );
						// 3: Empty rows for new Slide
						arrRows.length = 0;
						// 4: Reset curr table height for new Slide
						emuTabCurrH = 0; // This row's emuRowH w/b added below
						// 5: Empty current row's text (continue adding lines where we left off below)
						$.each(currRow,function(i,cell){ cell.text = ''; });
						// 6: Auto-Paging Options: addHeaderToEach
						if ( opts.addHeaderToEach ) {
							var headRow = [];
							$.each(arrObjTabHeadRows[0], function(iCell,cell){
								headRow.push({ text:cell.text, opts:cell.opts });
								var lines = parseTextToLines(cell.text, cell.opts.font_size, (arrColW[iCell]/ONEPT));
								if ( lines.length > intMaxLineCnt ) { intMaxLineCnt = lines.length; intMaxColIdx = iCell; }
							});
							arrRows.push( $.extend(true, [], headRow) );
						}
					}

					// B: Add next line of text to this cell
					if ( arrCellsLines[col][idx] ) currRow[col].text += arrCellsLines[col][idx];
				}

				// 2: Add this new rows H to overall (The cell with the longest line array is the one we use as the determiner for overall row Height)
				emuTabCurrH += arrCellsLineHeights[intMaxColIdx];
			}

			// E: Flush row buffer - Add the current row to table, then truncate row cell array
			// IMPORTANT: use jQuery extend (deep copy) or cell will mutate!!
			arrRows.push( $.extend(true, [], currRow) );
			currRow.length = 0;
		}); // row loop
	}); // tab loop
	// Flush final row buffer to slide
	arrObjSlides.push( $.extend(true,[],arrRows) );

	// STEP 5: Create a SLIDE for each of our 1-N table pieces
	$.each(arrObjSlides, function(i,slide){
		// A: Create table row array
		var arrTabRows = [];

		// B: Create new Slide
		var newSlide = ( opts.master && gObjPptxMasters ? api.addNewSlide(opts.master) : api.addNewSlide() );

		// C: Create array of Rows
		$.each(slide, function(i,row){
			var arrTabRowCells = [];
			$.each(row, function(i,cell){ arrTabRowCells.push( cell ); });
			arrTabRows.push( arrTabRowCells );
		});

		// D: Add table to Slide
		newSlide.addTable( arrTabRows, { x:(opts.x || arrInchMargins[3]), y:(opts.y || arrInchMargins[0]), cx:(emuSlideTabW/EMU), colW:arrColW } );

		// E: Add any additional objects
		if ( opts.addImage ) newSlide.addImage({ path:opts.addImage.url, x:opts.addImage.x, y:opts.addImage.y, w:opts.addImage.w, h:opts.addImage.h });
		if ( opts.addText  ) newSlide.addText(  opts.addText.text,   (opts.addText.opts  || {}) );
		if ( opts.addShape ) newSlide.addShape( opts.addShape.shape, (opts.addShape.opts || {}) );
		if ( opts.addTable ) newSlide.addTable( opts.addTable.rows,  (opts.addTable.opts || {}) );
	});
}

};

// [Node.js] support if ( NODEJS ) { // A: Load 2 depdendencies var fs = require("fs"); var $ = require("jquery-node"); var JSZip = require("jszip"); var sizeOf = require("image-size");

// B: Export module
module.exports = new PptxGenJS();

}

0

ismcagdas created 7 years ago

Support Team

Hi,

I think this is the framework you use <a class="postlink" href="https://github.com/gitbrent/PptxGenJS">https://github.com/gitbrent/PptxGenJS</a>.

According to it's explanation, first you need to include these scripts <a class="postlink" href="https://github.com/gitbrent/PptxGenJS#client-side">https://github.com/gitbrent/PptxGenJS#client-side</a>. We already have jquery, so you need to include other 3 scripts.

Then, in your page's javascript file, you can use it like this <a class="postlink" href="https://github.com/gitbrent/PptxGenJS#presentation-basics">https://github.com/gitbrent/PptxGenJS#p ... ion-basics</a>.

Do you have an exception ?

0

avanekar02 created 7 years ago

yes i followed all the steps and it works fine in the cshtml page, bu what i want is to call this way from the index.js page

var slide = pptx.addNewSlide();

because i am filling an array with values and finally when the user presses save i want to collect the data from our vm .array

and create the slide add the text and then save as pptx.

0

ismcagdas created 7 years ago

Support Team

Hi,

Can you share your not working code. It is better if you can share full code if index.js.

Thanks.

want to access this js from our js under app/tenant/view/ind #2368

4 Answer(s)