WijMo.js 5.2导出PDF,XLSX

最新推荐文章于 2023-05-25 11:39:59 发布

风神.NET

最新推荐文章于 2023-05-25 11:39:59 发布

阅读量651

点赞数

分类专栏： Wijmo5 Flexgrid

Wijmo5 Flexgrid 专栏收录该内容

10 篇文章 5 订阅

订阅专栏

Export.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />

    <!-- ensure IE uses the latest version of IE (yes, yes...) -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Third Party -->
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

    <!-- Wijmo引用 -->
    <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.knockout.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles/vendor/wijmo.min.css" />
    <!-- 其他组件 -->
    <script src="js/wijmo.grid.filter.min.js"></script>
    <script src="js/wijmo.pdf.min.js"></script>
    <script src="js/wijmo.grid.pdf.min.js"></script>

    <!-- 导出xlsx所需组件 -->
    <script src="js/wijmo.xlsx.min.js"></script>
    <script src="js/wijmo.grid.xlsx.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <!-- app styles -->
    <link href="styles/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <button id="btnExport" class="btn btn-default">
            导出PDF
        </button>
        <button id="btnCreateDoc" class="btn btn-default">
            创建PDF文档
        </button>

        <button id="btnExportxls" class="btn btn-default">
            导出XLSX
        </button>
        <div id="theGrid" class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }"></div>
            </div>
        </div>
    </div>
    <script type="application/javascript">
        //<![CDATA[
        onload = function() {

          // create some random data
          var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
          var data = [];
          for (var i = 0; i < 200; i++) {
            data.push({
                id: i,
              country: countries[i % countries.length],
              sales: Math.random() * 10000,
              expenses: Math.random() * 5000
            });
          }

          // show the data in a grid
          var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
            autoGenerateColumns: false,
            columns: [
                { binding: 'id', header: 'ID', width: 60 },
                { binding: 'country', header: 'Country', width: '2*'},
                { binding: 'sales', header: 'Sales', width: '*', format: 'n2'},
                { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2'}
            ],
            itemsSource: data
          });

          // add a filter to show that it works while exporting
          var f = new wijmo.grid.filter.FlexGridFilter(theGrid);

            // export grid to PDF
          document.getElementById('btnExport').addEventListener('click', function() {
                wijmo.grid.pdf.FlexGridPdfConverter.export(theGrid, 'LearnWijmo.pdf', {
                maxPages: 10,
              scaleMode: wijmo.grid.pdf.ScaleMode.PageWidth,
              documentOptions: {
                compress: true,
                header: { declarative: { text: '\t&[Page] of &[Pages]' } },
                footer: { declarative: { text: '\t&[Page] of &[Pages]' } },
                info: { author: 'C1', title: 'Learn Wijmo' }
                    },
                styles: {
                        cellStyle: { backgroundColor: '#ffffff' },
                    altCellStyle: { backgroundColor: '#f9f9f9' },
                    groupCellStyle: { backgroundColor: '#dddddd' },
                    headerCellStyle: { backgroundColor: '#eaeaea' }
                    }
                });
            });

            // create a PDF document with the grid and some other content
          document.getElementById('btnCreateDoc').addEventListener('click', function() {

                // create the document
                var doc = new wijmo.pdf.PdfDocument({
                compress: true,
              header: { declarative: { text: '\t&[Page]\\&[Pages]' } },
              ended: function (sender, args) {
                        wijmo.pdf.saveBlob(args.blob, 'LearnWijmoDoc.pdf');
                    }
                });

            // add some content
                doc.drawText('This is a FlexGrid');

                // add the grid (400pt wide)
                wijmo.grid.pdf.FlexGridPdfConverter.draw(theGrid, doc, 400);

            // finish document
                doc.end();
            });

             // export grid to XLSX
              document.getElementById('btnExportxls').addEventListener('click', function() {

                        // create book with current view
                  var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(theGrid, {
                    includeColumnHeaders: true,
                    includeRowHeaders: true
                        });
                  book.sheets[0].name = 'Learn Wijmo';

                        // save the book
                  book.save('LearnWijmo.xlsx');
              })
        }
        //]]>
    </script>

</body>

</html>

运行结果如图：

这里写图片描述

Demo下载地址

风神.NET

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WijMo.js 5.2导出PDF,XLSX

Export.html<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <!-- ensure IE
复制链接

扫一扫