Need to export json data to the excel file(large data), I can able to download the file and need to do some styles to the excel file(font, color, headers). I tried file-saver, Could you please suggest how to format the excel file.
loadData() {
const dataUrl =
'https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json';
this.http.get(dataUrl).subscribe(response => {
this.data = response.data;
});
}
exportAsXLSX(): void {
this.excelService.exportAsExcelFile(this.data, 'PersonsData');
}
Export to excel
Unfortunately, the SheetJS package you are using only offers style features in the PRO version. You cannot add a style without having the PRO version.
Related
I need to export an excel file that is comprised of formulas, formatted, etc. It's not just a table of data. I.e., top portion will be descriptions/calculations, and then the lower half will loop through a list of items. Adding this bc I need more functionality than vue-json-excel or vue-json-export offer (I think)
I know how to do this with webforms/code-behind, but I've been dabbling with VueJS and MVC and am trying to figure out how to get this done with that. I am using EPPlus.
From VueJS, I'm calling a webapi that hits my "reports" controller. For now, I'm just trying to see if I can actually export an Excel file from code-behind.
Right now, when I attempt to export a dummy file... nothing happens? There aren't any errors, but there is no prompt that says "Download file or Open" (or whatever).
public class ReportController : ApiController
{
public HttpResponseMessage Get(string aliases, string startDate, string endDate, string level)
{
//attempting to just export a dummy excel - not working :(
MediaTypeHeaderValue mediaType = MediaTypeHeaderValue.Parse("application/octet-stream");
MemoryStream memoryStream = new MemoryStream(Resources.AbsenceReport);
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
response.Content = new StreamContent(memoryStream);
response.Content.Headers.ContentType = mediaType;
response.Content.Headers.ContentDisposition =
new ContentDispositionHeaderValue("fileName") { FileName = "Test.xlsx" };
return response;
}
}
Am I missing something? In my Vue portion, I just have:
AR.getTeamReport(aliasesToSearch, startDate, endDate, level)
.then(response => {
//IDK MAN WILL IT WORK :X
})
.catch(error => {
console.log(error);
this.sentToastError(
"Unable to pull report. Please refresh and try again."
);
});
There was this one requirement for one of my SAPUI5 app table data to be able to be exported to Excel/spreadsheet. The sap.ui.core.util.Export doesn't meet the standard of exporting data especially it only write data in 1 column.
Sample exported data:
Since SAPUI5 1.50, SAP made sap.ui.export.Spreadsheet but according to one of their experts, the said library is not available for Eclipse development tools (https://answers.sap.com/questions/474315/sapuiexport-missing-in-sap-ui5-version-152.html)
It was then suggested to me to use 3rd party JS library that can export data to spreadsheet and upon researching, I came across with SheetJS. I found this article on how to implement and use the code of SheetJS library in SAPUI5: Export Excel (.xlsx extension) file with includes responsive table data in SAPUI5.
My question:
How to add external JS libraries on your SAPUI5 project on Eclipse? Please take note that we are running our SAPUI5 applications on NetWeaver server. I need to understand where to put those JS's based on the environment I have (is it fine to put it/them to webContent/ path?) and how to access them if ever.
Already got the answer by combining all the research I got.
I found a lot of combinations of external libs to use for the sheetjs to work like xlsx.js - jszip.js or xlsx.full.min.js only or there's also xlsx.full.min.js - FileSaver.js combination.
I first tried using xlsx.full.min.js and FileSaver combination and it worked! I downloaded both of the library first and copied them to my /webContent/controller path (yes, same path level of my controllers).
Next thing is to define them in your controller using sap.ui.define
Defining 3rd party libraries in SAPUI5
You will also notice that I added 2 line of codes above:
/* global XLSX:true */
/* global saveAs:true */
With those 2 line of codes, there will be an error upon call of the libraries. These are the global names of the JS if it's to be called outside of the js class.
Below is the test code I used to access the 2 JS I've mentioned above:
onExportToExcel: function() {
console.log(XLSX);
var wb = XLSX.utils.book_new();
wb.Props = {
Title: "Sample SheetJS",
Subject: "Test",
Author: "HPC",
CreatedDate: new Date(2018, 5, 19)
};
wb.SheetNames.push("Test Sheet");
var ws_data = [
['HPC', 'TEST', 'call']
]; //a row with 2 columns
var ws = XLSX.utils.aoa_to_sheet(ws_data);
wb.Sheets["Test Sheet"] = ws;
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
type: 'binary'
});
function s2ab(s) {
var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
var view = new Uint8Array(buf); //create uint8array as viewer
for (var i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
return buf;
}
saveAs(new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}), 'test.xlsx');
}
Output:
Output export file
Feel free to provide feedback on this.
There might be other better approach to achieve this goal.
There is the sap.ui.export.Spreadsheet control
I built a sample here a while ago.
I have a custom Active Reports server implemented in an httphandler, which can generate and export reports in the various formats available using the AR run-time ( excel, html, PDF, ... ). I'm now trying to use the JavaScript HTML5 viewer but it doesn't seem to be compatible with with any of the obvious export formats. The documentation and examples all show using the HTML5 viewer with the actual Active Reports server product and there are no examples for using it with a custom report service.
Client Code:
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#reportViewer',
report: {
id: "report1.rdlx"
},
reportService: {
url: /MyCustomReportService/reports.mrs?msg={....}
},
uiType: 'desktop'
});
Server Code:
request.context.Response.ContentType = "image/gif";
MemoryStream memoryStream = new MemoryStream();
report.Document.Save(memoryStream);
context.Response.BinaryWrite(memoryStream.ToArray());
also tried
request.context.Response.ContentType = "message/rfc822";
HtmlExport html = new HtmlExport();
html.OutputType = HtmlOutputType.DynamicHtml;
MemoryStream memoryStream = new MemoryStream();
html.Export(report.Document, memoryStream);
request.context.Response.BinaryWrite(memoryStream.ToArray());
From what I understand, you have two requirements :
(Please refer to my forum posts for each of the below requirements)
>>>> Using the HTML5Viewer with a CustomReportService
http://arhelp.grapecity.com/groups/topic/rdlx-and-web-config/#post-658924
http://arhelp.grapecity.com/groups/topic/crystal-report-object-data-source-html5/#post-660665
>>>> Implementing Custom Export in HTML5Viewer
http://arhelp.grapecity.com/groups/topic/csv-export-from-html5-viewer/#post-658376
http://arhelp.grapecity.com/groups/topic/html5-viewer-export-to-xlsx/#post-657866
http://arhelp.grapecity.com/groups/topic/export-to-rtf-using-html5-viewer/#post-656001
Let me know if that does not works for you or you have any further issues.
Regards,
Reema
I want to export WebGrid data to excel with formatting.
I have written below code which export WebGrid data to Excel.
WebGrid grid = new WebGrid(source: listReport, canPage: false, canSort: false);
string gridData = grid.GetHtml(
columns: grid.Columns(
grid.Column("ID", "ID"),
grid.Column("Name", "Name"),
grid.Column("Summary", "Summary"),
grid.Column("Detail", "Detail"),
grid.Column("ProjectName", "Project Name")
)
).ToString();
Response.ClearContent();
Response.AddHeader("content-disposition", "attachment; filename=CustomerInfo.xls");
Response.ContentType = "application/excel";
Response.Write(gridData);
Response.End();
I want to do formatting in excel.
Is it possible to export data with formatting?
Also it gives me below error when i open the generated excel
You haven't actually created an Excel file. You've created an HTML file masquerading as an Excel 2003 file, which is a bad idea. I explain why and cover some alternatives on my blog.
Styling will be difficult, because of the way you're creating the source HTML. You could parse it with a library, then add basic styling via each elements style attribute. Or instead of using WebGrid you can manually build your HTML.
string html = "<table style='color:red'><tr><td>Hello, world!</td></tr></table>";
But really, the best thing to do is generate real Excel files. Here's a quick excerpt from my blog using EPPlus. It's shown in Web Forms. In MVC you'd actually want to return a FileResult rather than writing directly to the response.
protected void ExportBtn_Click(object sender, EventArgs e)
{
Response.Clear();
Response.AddHeader("content-disposition", "attachment;filename=myexcelfile.xlsx");
Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
var package = new ExcelPackage(); //create a new package, this is the equivalent of an XLSX file.
var sheet = package.Workbook.Worksheets.Add("My Data"); //Add a new sheet to the workbook
var dt = GetDataTable(); //This retrieves a System.Data.DataTable, you'd likely get it from your database.
sheet.Cells["A1"].LoadFromDataTable(dt, true); //EPPlus contains helper function to load data from a DataTable, though you could manually fill in rows/column values yourself if you want
var range = sheet.Cells[1, 1, dt.Rows.Count + 1, 2]; //We're getting a reference to all the cells that contain data
var table = sheet.Tables.Add(range, "My Data Table"); //Creating an Excel table
table.TableStyle = TableStyles.Medium8; //Setting the table style to something that looks nice
range.AutoFitColumns(); //Auto fitting the column widths.
Response.BinaryWrite(package.GetAsByteArray());
Response.End();
}
I am using a telerik Radgridview in one of the my reports.
I have to export the result into Excel, for that I am using telerik's inbuild ExportToExcel
function this will export my result successfully to excel format. But my requirement is that I want to show the Header also in the generated Excel
Please advise
I found the solution for this. To achieve this we need to add following event:
protected void RadGrid1_ExcelMLExportRowCreated(object sender, Telerik.Web.UI.GridExcelBuilder.GridExportExcelMLRowCreatedArgs e)
{
if (e.RowType == Telerik.Web.UI.GridExcelBuilder.GridExportExcelMLRowType.HeaderRow)
{
e.Worksheet.WorksheetOptions.PageSetup.PageHeaderElement.Data = "This is the DRAFT Data";
}
}
It will work for me.