我尝试使用以下提到的插件将JSON数据生成为pdf。
# Install Cordova Plugins
> > ionic cordova plugin add cordova-plugin-file-opener2
> > ionic cordova plugin add cordova-plugin-file
> >
> > npm install pdfmake @ionic-native/file-opener @ionic-native/file
我尝试了两种以上的方法通过插件将数据转换为pdf，但是我找不到找到它的方法。请提供有关ionic 4的pdf转换器插件的相关版本
import { Component, OnInit } from '@angular/core';
import { DatabaseService } from "../services/database/database.service";
import { CommonService } from '../services/common/common.service';
import { ModalController } from '@ionic/angular';
import { Router, NavigationExtras } from '@angular/router';
// import { customerUsersType } from '../models/model';
import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';
import { LoadingController } from '@ionic/angular';
@Component({
selector: 'app-daily-reports',
templateUrl: './daily-reports.page.html',
styleUrls: ['./daily-reports.page.scss'],
})
export class DailyReportsPage implements OnInit {
loading: any;
constructor(private database: DatabaseService,
private router: Router,
private commonService: CommonService,
public modalController: ModalController,
public file: File,
public fileOpener: FileOpener,
public loadingCtrl: LoadingController
) { }
async presentLoading(msg) {
const loading = await this.loadingCtrl.create({
message: msg
});
return await loading.present();
}
ngOnInit() {
// this.generatePDF()
}
generatePDF() {
/* this.generatePDF() =
{ startDate: 'Start Date' },
{ EndDate: 'End Date' },
} */
this.presentLoading('Creating PDF file...');
const div = document.getElementById("printable-area");
const options = { background: "white", height: div.clientWidth, width: div.clientHeight };
}
}
ion-header ion-icon {`enter code here`
font-size: 18px;
}
ion-toolbar .tabs {
display: flex;
justify-content: center;
.tab {
text-align: center;
width: calc(100% / 3);
color: #cfe191;
&.active {
color: #cfe191;
}
ion-icon {
font-size: 30px;
}
.label {
font-size: 10px;
margin-top: -2px;
}
}
}
ion-card {
width: 100%;
}
.ssptbg_color{
background:#1f431d;
}
.my-custom-menu {
--width: 500px;
}
ion-content{
--background: #cfe191;
/* background: url('/assets/icon/smpt_bg.png');
background-repeat: no-repeat;
background-size: cover;*/
}
ion-card { --background: #ffffff; }
.card-style{
--border-radius: 50px;
width:100%;
height:70px;
}
.badgesISMU{
position: absolute;
border-radius: 100%;
padding:20px;
right:8px;
bottom:8px;
background:#f5f5f5;
color:#080808;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
font-weight: 700;
}
.verticalaligncenter{
margin-top:5%;
}
.text-dark{
color:#080808;
font-size:16px;
font-weight:700;
}
.icon-padding{
padding: 5px 5px 5px 5px;
}
.bg-colorC1{
background:#fcf288;
}
a.tab-link{
text-decoration: none ;
color: #cfe191;
}
a.tab-link:hover
{
text-decoration: none ;
color: #cfe191;
}
a{
text-decoration: none ;
color: #000000;
}
a:hover
{
text-decoration: none ;
color: #000000;
}
.header .col {
background-color:lightgrey;
}
.font-weight{
font-weight:700;
}
.title{
margin-bottom:5px;
border-radius:5px;
color:#555;
background:#fff;
padding: .7rem .5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
text-align:center;
}
.font-12
{
font-size:12px;
}
ion-label{
background-color: transparent;
}
<ion-header>
<ion-toolbar color="secondary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Daily Reports</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<form class="mrg-btm--10">
<ion-item>
<ion-label>Start Date</ion-label>
<ion-datetime Placeholder="DD MMM YYYY" min="2019" max="2025" >Start Date<br></ion-datetime>
</ion-item>
<ion-item>
<ion-label>End Date</ion-label>
<ion-datetime Placeholder="DD MMM YYYY" min="2019" max="2025" >End Date</ion-datetime>
</ion-item>
<div class="text-center ion-margin-vertical">
<ion-button type="submit" color="secondary" shape="round">
Generate Report
</ion-button>
</div>
</form>
<!--<form class="mrg-btm--10" [formGroup]="dailyReportsForm" (submit)="createDailyReportsSubmit(dailyReportsForm.value)">
<form class="mrg-btm--10">
<ion-item>
<ion-label>DD MMM YYYY</ion-label>
<ion-datetime displayFormat="DD MMM YYYY H:mm" min="2019" max="2119" value="2005-06-17"></ion-datetime>
</ion-item> -->
<!-- <ionic-calendar-date-picker (onSelect)="dateSelected($event)">Start Date</ionic-calendar-date-picker>
<ionic-calendar-date-picker (onSelect)="dateSelected($event)">End Date</ionic-calendar-date-picker>
<div class="text-center ion-margin-vertical">
<ion-button type="submit" color="secondary" shape="round" [disabled]="!dailyReportsForm.valid">
Generate Report
</ion-button>
</div>
</form> */ -->
</ion-content>
<ion-footer>
<ion-toolbar color="secondary">
<div class="tabs">
<div class="tab">
<a href="/send-mail" class="tab-link">
<ion-icon name="mail"></ion-icon>
<div class="label">Mail</div>
</a>
</div>
<div class="tab">
<a href="/admin-profile" class="tab-link">
<ion-icon name="person"></ion-icon>
<div class="label">Profile</div>
</a>
</div>
<div class="tab">
<a href="/admin-dashboard" class="tab-link">
<ion-icon name="home"></ion-icon>
<div class="label">Home</div>
</a>
</div>
<div class="tab">
<a href="/device-details" class="tab-link">
<ion-icon name="list-box"></ion-icon>
<div class="label">Device Details</div>
</a>
</div>
<div class="tab">
<a href="/refertravel" class="tab-link">
<ion-icon name="car"></ion-icon>
<div class="label">Refer Travel</div>
</a>
</div>
</div>
</ion-toolbar>
</ion-footer>