jQuery 在 angularjs 中将 ng-grid 数据导出为 CSV 和 PDF 格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18894356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Exporting ng-grid data to CSV and PDF format in angularjs
提问by Rajesh kumar
Please Help me....any plugin is there..?
请帮帮我....有任何插件吗..？
I have searched for exporing excel and PDF in angularjs. using ng-grid.
我在 angularjs 中搜索了 exporing excel 和 PDF。使用 ng-grid。
Exporting ng-grid data to CSV and PDF format in angularjs
在 angularjs 中将 ng-grid 数据导出为 CSV 和 PDF 格式
回答by AardVark71
For csv export there is the ngGridCsvExportPluginthat you can find here
Just at a reference to the script and add the ngGridCsvExportPlugin to the gridOptions
(and activate the footer too by adding showFooter : trueto the gridOption)
对于 csv 导出，您可以在此处找到ngGridCsvExportPlugin只需引用脚本并将 ngGridCsvExportPlugin 添加到 gridOptions （并通过将showFooter : true添加到 gridOption 来激活页脚）
$scope.gridOptions = {
data: 'myData',
plugins: [new ngGridCsvExportPlugin()],
showFooter: true,
};
A basic plunker where you can see it at work can be found here
可以在此处找到您可以在工作中看到的基本 plunker
回答by Rajul
You don't need any external plugin now. ng grid which new version is called now UI-Grid has native support. Method names are csvExport and pdfExport.
您现在不需要任何外部插件。现在称为新版本的 ng grid UI-Grid 具有本机支持。方法名称是 csvExport 和 pdfExport。
回答by user1916988
If you are able to do something outside of angular you could use https://github.com/Ziv-Barber/officegenfor excel. See here https://stackoverflow.com/questions/18476921/angularjs-generating-a-pdf-client-sidefor pdfs.
如果您能够做一些 angular 之外的事情，您可以使用https://github.com/Ziv-Barber/officegenfor excel。参见此处https://stackoverflow.com/questions/18476921/angularjs-generating-a-pdf-client-side的 pdf。
回答by yair
I used jsPDF. It's the simplest ever.
我使用了jsPDF。这是有史以来最简单的。
Include it in your html:
将其包含在您的html:
<script src="jspdf.min.js"></script>
<!-- script src="jspdf.debug.js"></script--><!-- for development -->
Use it1:
使用它1：
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
And bind your button or whatever to this code.
并将您的按钮或其他任何内容绑定到此代码。
Advanced Tip
高级提示
I also found the jsPDF-AutoTableplugin-for-jsPDF extremely useful.
我还发现jsPDF-AutoTableplugin-for-jsPDF 非常有用。
Include it in your html:
将其包含在您的html:
<script src="jspdf.plugin.autotable.js"></script>
In the controller, transfer data from ng-griddata to jsPDF, using jsPDF-AutoTable plugin.
在 中，使用 jsPDF-AutoTable 插件controller将数据从ng-griddata 传输到 jsPDF。
Assuming you define your ng-gridtable:
假设你定义你的ng-grid表：
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{field: 'user', displayName: 'User' /*,...*/ },
{field: 'email', displayName: 'Email' /*,...*/ },
{field: 'favoriteShruberry', displayName: 'Favorite Shrubbery' /*,...*/ }
]
};
... Then, in the function that generates the pdf:
...然后，在生成 的函数中pdf：
var columns = [];
var rows = [];
// copy ng-grid's titles to pdf's table definition:
var allColumnDefs = $scope.gridOptions.columnDefs;
for ( var columnIdx in allColumnDefs ) {
var columnDef = allColumnDefs[columnIdx];
var newColumnDef = {
title: columnDef.displayName,
dataKey: columnDef.field
};
columns.push(newColumnDef);
}
// copy ng-grid's actual data to pdf's table:
var allRecords = $scope.myData;
for ( var recordIdx in allRecords ) {
var record = allRecords[recordIdx];
var newRow = {};
for ( var columnIdx in allColumnDefs ) {
var columnDef = allColumnDefs[columnIdx];
var value = record[columnDef.field];
if (value !== null) {
newRow[columnDef.field] = value;
}
}
rows.push(newRow);
}
var docName = 'favoriteShrubberies.pdf';
var pdfStyle = { styles: { overflow: 'linebreak' } } // this handles cells that contain really long text like in this comment, by auto-inserting a
// line break inside the cell, causing the whole line's height to increase accordingly
var doc = new jsPDF('p', 'pt'); // currently supports only 'pt'
doc.autoTable(columns, rows, pdfStyle);
doc.save(docName);
1Example is straight from the jsPDF GitHub repo
1示例直接来自 jsPDF GitHub 存储库
回答by baldmark
Very late to this party, but I wrote a PDF output that works for me. There is a plunker, and it is available as a pluginfor V2 of ng-grid, but it doesn't look like they have taken it through into V3 (but I just had a very quick peek, so I could be wrong).
这个聚会很晚了，但我写了一个对我有用的 PDF 输出。有一个plunker，它可以作为ng-grid V2 的插件使用，但看起来他们并没有将它引入 V3（但我只是快速浏览了一下，所以我可能是错的）。
