时间戳

首页 > 解决方案 > 如何使用 jsPDF for PDF 和 SharePicker 在 Ionic 4 中共享在 Android/IOS 设备上生成和共享 PDF

angular - 如何使用 jsPDF for PDF 和 SharePicker 在 Ionic 4 中共享在 Android/IOS 设备上生成和共享 PDF

问题描述

主页.html

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="sharePicker()">
      <ion-icon name="Share-alt" color="light"></ion-icon>
    </ion-fab-button>
</ion-fab>

主页.ts

async sharePicker() {
var doc = new jsPDF();
var col = ["Id", "Brand name"];
var rows = [];
this.brand.forEach(element => {
  var temp = [
    element.id,
    element.name,
  ];
  console.log("temp", temp)
  rows.push(temp);

});
doc.autoTable(col, rows);
doc.save("BrandList.pdf");

this.platform.ready()
  .then(() => {
    this.socialSharing.share(null, null, doc.save("BrandList.pdf"), null)
      .then((data) => {
        console.log('Shared via SharePicker');
      }).catch((err) => {
        console.log('Was not shared via SharePicker');
      });
   });
  }

项目列表直接获取Database并添加到col参数中，

我想要当我点击FAB按钮，然后PDF自动生成，然后打开分享选项并PDF在社交媒体上发送，比如 whatsapp、fb 等

此代码PDF在浏览器中生成，但不在设备上。

标签： angularionic-frameworkpdf-generationionic4share

解决方案

jsPDF 不会使用“pdf.save()”在手机/平板电脑/ipad 上下载文件。

检查这个

直接通过社交共享发送的选项是使用带有文件参数的电子邮件，或者您也可以通过 Firebase 上传并仅共享 url

使用 Firebase 的示例：

uploadPDF(selected) {  
    return firebase.storage().ref(this.pathFinal).child('/path/').putString(selected, 'data_url')
  }

然后：

upload(){        
    let loading = this.uiUtils.showLoading("uploading...")
    loading.present()

    this.storage.uploadPDF('pathtopdf')

      .then(snapshot => {

        snapshot.ref.getDownloadURL().then(url => {
          loading.dismiss()
            console.log('Share this url: ' + url)
            this.uiUtils.showAlertSuccess('Success')
          })

        }).catch(err => {
          loading.dismiss()
          this.idUrl = ""
          this.uiUtils.showAlert("Atenção", err).present()

        })
      })
      .catch( error => {
        loading.dismiss()
        this.uiUtils.showAlert("Atenção", error).present()

      }).catch(errorSend => {
        loading.dismiss()
        this.uiUtils.showAlert("Atenção", errorSend).present()
      })      
  }

推荐阅读