JPG 到 PDF 转换 Cordova 插件答案

【问题标题】：JPG to PDF conversion Cordova pluginJPG 到 PDF 转换 Cordova 插件
【发布时间】：2016-09-17 06:04:27
【问题描述】：

我正在使用 ionic 框架，我想从厨房中挑选一个图像文件并将其转换为 PDF 并希望将其保存在手机上的文件系统中。是否有任何 javascript 或 cordova 插件可用于执行此任务。

我发现jsPDF 可用于将图像转换为 pdf，但是它真的可以在移动设备上使用吗？

【问题讨论】：

稍微玩一下jsPDF，我认为它应该可以在移动设备中使用。
@ArpitVasani 我可以在文件系统中保存 PDF
@Anil8753 我建议你看看这个链接 - stackoverflow.com/questions/28669480/…。您需要做的就是将您的 JPG 文件转换为 base64 图像 URI 并输入插件以从中获取 PDF。希望对您有所帮助。
@Anil8753 是的，你可以。一旦 jsPDF 准备好 PDF，然后使用 this plugin 将其保存在设备中。

标签： javascript cordova ionic-framework cordova-plugins jspdf

【解决方案1】：

希望我没有那么晚！

除了jSPDF，还需要以下包：

cordova 插件文件
cordova-plugin-file-opener2

并安装相应的离子包：

bower install ngCordova

请注意，关于如何在文件系统中保存 pdf 文件有几种可能的解决方案。我必须将 pdf 文件移动到某个目录才能打开它。尽管如此，这个解决方案适用于我迄今为止测试过的所有安卓手机，你可以创建你喜欢的所有 pdf。

iOS：您可以修改 storage-directory 以便它也适用于 iOS 版本。

索引.html：

<head>
<meta charset="utf-8">
... include jsPDF
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

....
some html
....

... include ngCordova
<script src="lib/ngCordova/dist/ng-cordova.js"></script>

.... the core-library
<script src="cordova.js"></script>
....
</head>

View.html：

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <p on-tap="savePDF()">Create PDF</p>
    <p on-tap="openPDF()">Open PDF</p>
  </ion-content>
</ion-view>

App-JS：

// to not forget to include ngCordova in order to use $cordovaFile in your controller
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova'])
...
...

控制器-JS：

angular.module('starter.controllers', []).controller('DashCtrl', function($scope,$cordovaFile) {

  $scope.pdfFilename = "test.pdf";

  $scope.makePDF = function(){
    var imgData = "your base64 image-data";

    var doc = new jsPDF();

    doc.setFontSize(40);
    doc.text(35, 25, "Octonyan loves jsPDF");
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
    return doc.output('blob');
  };

  $scope.getDirectoryInfo = function(){
    return {
      storage: cordova.file.externalRootDirectory, // for android, you may have to use another directory
      pdfDir: cordova.file.externalRootDirectory+"pdfs/"
    }
  };

  $scope.savePDF = function(){
    var dirs = $scope.getDirectoryInfo();
    var storageDir = dirs.storage;

    // create directory on the first place if it has not been created so far
    $cordovaFile.createDir(storageDir, "pdfs", false);

    var pdfBlob = $scope.makePDF();
    // create empty pdf-file(in the root-dir)
    $cordovaFile.createFile(storageDir, $scope.pdfFilename, true).then(function(success) {
      // write pdf-file(in the root dir)
      $cordovaFile.writeExistingFile(storageDir, $scope.pdfFilename, pdfBlob, true).then(function (success) {
        var fullTmpPath = storageDir + $scope.pdfFilename;
        window.resolveLocalFileSystemURL(fullTmpPath, function (fileEntry) {
          // get destination-directory to put your pdf into
          window.resolveLocalFileSystemURL(dirs.pdfDir, function (dirEntry) {
            // move written pdf to the destination-directory
            fileEntry.moveTo(dirEntry, $scope.pdfFilename, function (newFileEntry) {
              alert($scope.pdfFilename+' is finish! Now you can open it');
            });
          });
        });
      }, function (error) {
        console.log('there was some error while writting file: ',error);
      });
    });

  };

  $scope.openPDF =function(){
    var dirs = $scope.getDirectoryInfo();
    cordova.plugins.fileOpener2.open(dirs.pdfDir+$scope.pdfFilename,'application/pdf',function(){
      console.log('success');
    });
  };

});

尽管您的问题已在一段时间前提出，但希望这会有所帮助。

【讨论】：