Question

我们正在尝试将移动应用的内容（使用ionic2）保存为图像，当用户点击下载该网址的网址时，也会下载同样的内容。

在page.ts

declare var window;
@IonicPage()
@Component({
  selector: 'page-hospital',
  templateUrl: 'hospital.html',
})
export class HospitalPage {

  pdfObj=null;


  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform,public file: File,public fileOpener: FileOpener ) {
  }
  downloadPDF(){

          //code to be inserted to save the whole page content as image and to be downloaded to mobile      }

相关的HTML如下： -

<button type="button" (click)="downloadPDF()">Download PDF</button>

请建议

Answer 1

您是否考虑过使用print或screenshot plugin？

这是一个小片段，它有点hacky但它会让你知道你可以做什么。该代码段不能在此页面中起作用以避免XSS安全问题，但它可以在您的项目中使用。

var printPage = function() {
	var a = document.getElementById('myContentStyle').value;
	var b = document.getElementById('myContent').innerHTML;

        window.frames["print_frame"].document.title = "My document";
	window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
	window.frames["print_frame"].window.focus();
	window.frames["print_frame"].window.print();
}

#myContentStyle, #printFrame {
  display:none;
}

<div id="myContentStyle">
  @page {}
  .page-break {page-break-after: always;}
</div>

<button onclick="printPage()">Print!</button>

<div id="myContent">
  <h1>Test</h1>
  <h1 class="page-break">Test 2</h1>
</div>

<iframe id="printFrame" name="print_frame" src="about:blank"></iframe>

下载移动应用程序屏幕内容为图像

1 个答案: