Question

这是我的html代码，我在/* class Matrix represents a matrix operator[](int i) returns a reference to the ith Row Row is an internal type that simply defines the operator[](int j) to return the ith element in a Row (which is a T&) */ template <typename T> class Matrix { // implementation int col, row; typedef std::vector<T> Row; std::vector<Row> data; public: // interface Matrix(int c, int r): row(r), col(c), data(c, std::vector<T>(r)) {} // allow to use matrix[i][j] Row & operator[](int i) { return data[i]; } };文件中呈现了所有json数据，但是

TypeError：无法将undefined或null转换为object 在Function.keys（）在DocMeasure.measureNode（pdfmake.js：15647）在DocMeasure.measureDocument（pdfmake.js：15635）在LayoutBuilder.tryLayoutDocument（pdfmake.js：15088）在LayoutBuilder.layoutDocument（pdfmake.js：15076） at PdfPrinter.createPdfKitDocument（pdfmake.js：2130）在Document._createDoc（pdfmake.js：82）在Document.getDataUrl（pdfmake.js：177）在Document.open（pdfmake.js：109） at l。$ scope.openPdf（app.js：29）

.js

Answer 1

您可以使用pdfmake导出pdf

<强>样本

var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.data=  [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];
     
     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);

<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="listController">
    <div id="exportthis">
      {{data}}
    </div>
    <button ng-click="export()">export</button>
  </div>
</body>

</html>

Answer 2

以下是将HTML表格导出为EXcel，CSV，Pdf，Doc

的代码

https://plnkr.co/edit/HmKBjYmJNjp8mPzIlg52?p=preview

  <body ng-controller="MainCtrl">
<p>Export HTML Table to Excel, Pdf, CSV and Doc</p>

<table class="export-table" style="width: 100%; margin-top: 20px">
      <thead>
          <tr>
              <th>Employee ID</th>
              <th>Last Name</th>
              <th>First Name</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="item in reportData">
              <td>{{item.EmployeeID}}</td>
              <td>{{item.LastName}}</td>
              <td>{{item.FirstName}}</td>
              <td>{{item.Salary}}</td>
          </tr>
      </tbody>
</table>
<hr>
<a href="#" data-ng-click="exportAction('csv')"> Export CSV</a><br/><br/>
<a href="#" data-ng-click="exportAction('excel')"> Export Excel</a><br/><br/>
<a href="#" data-ng-click="exportAction('doc')"> Export Doc</a><br/><br/>
<a href="#" data-ng-click="exportAction('pdf')"> Export Pdf</a><br/><br/>

Answer 3

我已经用过了：

https://github.com/MrRio/jsPDF

然后你就可以像你一样在你的控制器中使用：

./a.out
1ST NUMBER=>    sign:0 exponent:1 0 0 1 1 1 1 fraction:0 1 0 0 1 0 1 0 1 0 1 0 0 1 1 1 1 1 1 0 0 0 1 0
2ND NUMBER=>    sign:0 exponent:1 0 0 1 1 1 1 fraction:0 1 0 0 0 1 0 0 1 0 1 1 0 0 1 0 0 0 0 0 0 0 0 1
1ST NUMBER=>    positive ( 1+1/(2) +1/(16) +1/(64) +1/(256) +1/(1024) +1/(8192) +1/(16384) +1/(32768) +1/(65536) +1/(131072) +1/(262144) +1/(4194304) )*2^31
2ND NUMBER=>    positive ( 1+1/(2) +1/(32) +1/(256) +1/(1024) +1/(2048) +1/(16384) +1/(8388608) )*2^31
@ bc
scale=20
( 1+1/(2) +1/(16) +1/(64) +1/(256) +1/(1024) +1/(8192) +1/(16384) +1/(32768) +1/(65536) +1/(131072) +1/(262144) +1/(4194304) )*2^31
3399999999.99999999999463129088
 ( 1+1/(2) +1/(32) +1/(256) +1/(1024) +1/(2048) +1/(16384) +1/(8388608) )*2^31
3299999999.99999999999731564544

Answer 4

FOR ANGULAR

第1步：npm install jspdf-autotable

或 index.html 加入<head></head>添加：<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js">

第2步：在 Angular-cli.json 中添加：

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

步骤3： app.component.ts或任何其他组件 aff下面的导入

从@ angular / core＆＃39;;

导入{Component}

declare var jsPDF: any;

第4步：对于组件中的测试：

export class AppComponent {
  title = 'app works!';

  public columns: string[] = ['Name', 'Phone', 'Whatsapp'];
  public data: string[] = ['Diego Venâncio', '79999565796', '79912345678'];

  constructor() {
    var doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, data);
    doc.save("table.pdf");
  }

}

more details?

Answer 5

最佳可行方法是使用window.print（）函数。不需要任何库

专业人士

1。无需外部库。

2。我们也只能打印身体的选定部位。

3。没有CSS冲突和js问题。

4。核心html / js功能

---简单添加以下代码

CSS 至

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

JS代码-在btn点击上调用以下功能

$scope.printWindow = function () {
  window.print()
}

注意：在每个CSS对象中使用！important

示例-

.legend  {
  background: #9DD2E2 !important;
}

如何在angularjs中将html数据导出为pdf

5 个答案: