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.
/* 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'); }
var PptxGenJS = function(){ // CONSTANTS var APP_VER = "1.1.6"; var APP_REL = "20170119"; var LAYOUTS = { 'LAYOUT_4x3' : { name: 'screen4x3', width: 9144000, height: 6858000 }, 'LAYOUT_16x9' : { name: 'screen16x9', width: 9144000, height: 5143500 }, 'LAYOUT_16x10': { name: 'screen16x10', width: 9144000, height: 5715000 }, 'LAYOUT_WIDE' : { name: 'custom', width: 12191996, height: 6858000 } }; var BASE_SHAPES = { RECTANGLE: { 'displayName': 'Rectangle', 'name': 'rect', 'avLst': {} }, LINE: { 'displayName': 'Line', 'name': 'line', 'avLst': {} } }; var SLDNUMFLDID = '{F7021451-1387-4CA6-816F-3879F97B5CBC}'; var IMG_BROKEN = 'data:image/png;base64,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'; var EMU = 914400; // One (1) Inch - OfficeXML measures in EMU (English Metric Units) var ONEPT = 12700; // One (1) point (pt) var CRLF = '\r\n';
// 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<gObjPptx.slides.length; idx++ ) {
intSlideNum++;
zip.file("ppt/slideLayouts/slideLayout"+ intSlideNum +".xml", makeXmlSlideLayout( intSlideNum ));
zip.file("ppt/slideLayouts/_rels/slideLayout"+ intSlideNum +".xml.rels", makeXmlSlideLayoutRel( intSlideNum ));
zip.file("ppt/slides/slide"+ intSlideNum +".xml", makeXmlSlide(gObjPptx.slides[idx]));
zip.file("ppt/slides/_rels/slide"+ intSlideNum +".xml.rels", makeXmlSlideRel( intSlideNum ));
}
zip.file("ppt/slideMasters/slideMaster1.xml", makeXmlSlideMaster());
zip.file("ppt/slideMasters/_rels/slideMaster1.xml.rels", makeXmlSlideMasterRel());
// Add all images
for ( var idx=0; idx<gObjPptx.slides.length; idx++ ) {
for ( var idy=0; idy<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(',') == -1 && data.indexOf(';') == -1 ) data = 'image/png;base64,'+data;
else if ( data.indexOf(',') == -1 ) data = 'image/png;base64,'+data;
else if ( data.indexOf(';') == -1 ) data = 'image/png;'+data;
// B: Grab base64 encoding header (ex: "data:image/png;base64")
var header = data.substring(0, data.indexOf(","));
// C: Set content and trim the leading base64 header ('data:image/png;base64,') JSZip only needs the data after ',' (will error otherwiose)
var content = data.substring(data.indexOf(",") + 1);
// D: Add image
zip.file( "ppt/media/image"+id+"."+extn, content, {base64:true} );
}
}
zip.file("ppt/theme/theme1.xml", makeXmlTheme());
zip.file("ppt/presentation.xml", makeXmlPresentation());
zip.file("ppt/presProps.xml", makeXmlPresProps());
zip.file("ppt/tableStyles.xml", makeXmlTableStyles());
zip.file("ppt/viewProps.xml", makeXmlViewProps());
// STEP 3: Push the PPTX file to browser
var strExportName = ((gObjPptx.fileName.toLowerCase().indexOf('.ppt') > -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<->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(/<br[^>]*>/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<intMaxLineCnt; idx++) {
// 1: Add the current line to cell
for (var col=0; col<arrCellsLines.length; col++) {
// A: Commit this slide to Presenation if table Height limit is hit
if ( emuTabCurrH + arrCellsLineHeights[intMaxColIdx] > 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();
}
i tried running on another browser firefox, exactly the same error, i also re published after deleting .
@using System.Web.Optimization @using Abp.Web.Mvc.Extensions @using Samit.CmsProTest.Localization @{ SetAntiForgeryCookie(); } <!DOCTYPE html>
<html lang="en" dir=@(CultureHelper.IsRtl ? "rtl" : "")>
<head> <meta charset="utf-8"> <title>CmsProTest</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@* Fill these meta tags upon your project specification *@
<meta content="CmsProTest" name="description">
<meta content="CmsProTest" name="keywords">
<meta content="CmsProTest" name="author">
@* You can enable and fill these lines according to documentation on <a class="postlink" href="http://ogp.me/">http://ogp.me/</a>
<meta property="og:site_name" content="-CUSTOMER VALUE-">
<meta property="og:title" content="-CUSTOMER VALUE-">
<meta property="og:description" content="-CUSTOMER VALUE-">
<meta property="og:type" content="website">
<meta property="og:image" content="-CUSTOMER VALUE-">
<meta property="og:url" content="-CUSTOMER VALUE-">*@
<link rel="shortcut icon" href="~/favicon.ico">
<link href="~/Content/fonts-open-sans.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/fonts-ptsans-narrow.css" rel="stylesheet" type="text/css"/>
<link href="~/Content/fonts-sourcesans-pro.css" rel="stylesheet" type="text/css" />
@Styles.Render("~/Bundles/Frontend/libs/css" + (CultureHelper.IsRtl ? "RTL" : ""))
@RenderSection("Styles", false)
@Styles.Render("~/Bundles/Frontend/metronic/css" + (CultureHelper.IsRtl ? "RTL" : ""))
@Styles.Render("~/Bundles/Common/css")
@Html.IncludeStyle("~/Views/Layout/layout.css")
<script type="text/javascript">
@* This is used to get the application's root path from javascript.
It's useful if you're running application in a virtual directory under IIS. *@
var abp = abp || {}; abp.appPath = '@ApplicationPath';
</script>
</head> <body class="corporate">
@Html.Action("Header", "Layout", new { currentPageName = ViewBag.CurrentPageName })
<div class="main">
<div class="container">
@RenderBody()
</div>
</div>
@Html.Partial("~/Views/Layout/_Footer.cshtml")
@Scripts.Render("~/Bundles/Frontend/libs/js")
<script type="text/javascript">
abp.localization.defaultSourceName = '@LocalizationSourceName';
</script>
<script src="~/AbpScripts/GetScripts" type="text/javascript"></script>
@Scripts.Render("~/Bundles/Frontend/metronic/js")
@Scripts.Render("~/Bundles/Common/js")
<script type="text/javascript">
$(function () {
Layout.init();
});
</script>
@RenderSection("Scripts", false)
</body>
</html>
No , in development environment it runs fine.....
the error shows
Uncaught ReferenceError: angular is not defined 4Login.js?v=635907020060000000:61 Uncaught TypeError: Cannot read property 'consts' of undefined
something to do with smtp configuration
[WebException: Unable to connect to the remote server] System.Net.Mail.ConnectAndHandshakeAsyncResult.End(IAsyncResult result) +2394490 System.Net.Mail.SmtpTransport.EndGetConnection(IAsyncResult result) +29 System.Net.Mail.SmtpClient.ConnectCallback(IAsyncResult result) +51
even without using datepicker the same issue also will you hellp me fix datepicker issue