PCF callback not fired for JSPDF - HTML method

[balumallisetty]

callback never fired while Normal save with sync calls work fine. .html is Async method and need Promise to be fulfilled to Move to next render Portions of pdf. I tried native js locally on Browser works fine with callbacks

import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf";

	public updateView(context: ComponentFramework.Context<IInputs>): void {
        if (params.fileName.raw?.startsWith('yes')) {
			params.fileName.raw = 'no'
			console.log("pcf fired");
const doc = new jsPDF();
				var width = doc.internal.pageSize.getWidth();
				var height = doc.internal.pageSize.getHeight();

				doc.setFontSize(40);
				doc.text("Sample Header", 10, 10);
				doc.line(width / 4, height / 4, width, height / 4);
				doc.html(document.body, {
					html2canvas: {
						logging: true
					},
					callback: (doc) => {
						doc.save();
					}
				}
}

{
  "name": "pcf-project",
  "version": "1.0.0",
  "description": "Project containing your PowerApps Component Framework (PCF) control.",
  "scripts": {
    "build": "pcf-scripts build",
    "clean": "pcf-scripts clean",
    "rebuild": "pcf-scripts rebuild",
    "start": "pcf-scripts start",
    "refreshTypes": "pcf-scripts refreshTypes"
  },
  "dependencies": {
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "dompurify": "2.0.12",
    "html2canvas": "1.0.0-rc.2",
    "jspdf": "2.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "^16.4",
    "@types/powerapps-component-framework": "^1.3.0",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "pcf-scripts": "^1",
    "pcf-start": "^1",
    "typescript": "^4.3"
  }
}

 @rexkenley  @ben-thompson @DianaBirkelbach 

[DianaBirkelbach]

Hi @balumallisetty , 

Not sure about the callback issue, and I think it should work since the Field Service Report PCF does the same: https://docs.microsoft.com/en-us/dynamics365/field-service/mobile-powerapp-reporting?WT.mc_id=BA-MVP...

export const printDocument = (onSave) => async () => {
  const input = document.getElementById("divToPrint");

  let pdf = new jsPDF("p", "pt", "a4");
  pdf.setProperties({
    title: "PDF Title",
    subject: "PDF Sample",
    author: "Microsoft",
    keywords: "generated, javascript",
    creator: "Microsoft",
  });
  pdf.setLanguage("en");

  // Can also add font files here
  // pdf.addFileToVFS("chinese.ttf", font);
  // pdf.addFont("chinese.ttf", "chinese", "normal");
  // pdf.setFont("chinese", "normal");

  pdf.html(input, {
    callback: (htmlPDF) => {
      // Can trigger a download directly to device
      // htmlPDF.save("test.pdf");

      // Save pdf to timeline/notes
      let data = htmlPDF.output("datauristring");
      onSave(data);
    },
  });
};

But maybe it's another issue, which cause the problem.
The "param" is the one from context? If so, you shoudn't try to set the ".raw" value.

The updateView could be called a few times. The async process from pdf.html could take longer, and not be ended until the updateView is called again.

[balumallisetty]

@DianaBirkelbach  Thanks for the information. and Sharing the sample PCF

I did try to export PDF from the Component Init() method itself but no luck. 

I also Tried same version as Field Service PCF jspdf and html2canvas still callback never gets fired. 

Is it possible to find how html2canvas was imported inside the PCF? one of the Blogs I have seen html2canvas imported and Typecased as Below :

Reference : https://github.com/ritikaagarwal08/Screenshot/blob/master/src/screenshot/index.ts 

import * as html2canvasWrong from "html2canvas"
var html2canvas = html2canvasWrong as any as (element: HTMLElement, options?: Partial<html2canvasWrong.Options>) => Promise<HTMLCanvasElement>

************************************************************************************************

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { jsPDF } from "jspdf";

export class pcf implements ComponentFramework.StandardControl<IInputs, IOutputs> {
	private _value: number;

	private _notifyOutputChanged: () => void;
	// private labelElement: HTMLLabelElement;
	// private inputElement: HTMLInputElement;
	private container: HTMLDivElement;
	private _context: ComponentFramework.Context<IInputs>;
	private _refreshData: EventListenerOrEventListenerObject;
	private _edtorplaceholder: HTMLDivElement;
	private isrendered: boolean;
	//private editor : editorJS;


	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {
		this._context = context;
		this.container = container;
		this._notifyOutputChanged = notifyOutputChanged;
		this._refreshData = this.refreshData.bind(this);
		//this._value = context.parameters.controlValue.raw!;


		const gridHTML = `
<div id="dashboard">

 <button id="save-button">Download</button>
 `
		let ele = document.createElement("div");
		this.container = document.createElement("div");
		this.container.id = 'GridContainer';
		this.container.innerHTML = gridHTML;

		//ReactDOM.render(React.createElement(new editorJS(), null), this.container);
		this.exportToPDF("");
		container.appendChild(this.container);
	}

	public refreshData(evt: Event): void {
		//	this._value = (this.inputElement.value as any) as number;
		//	this.labelElement.innerHTML = this.inputElement.value;
		this._notifyOutputChanged();
	}

	public updateView(context: ComponentFramework.Context<IInputs>): void {
		// storing the latest context from the control.
		//this._value = context.parameters.controlValue.raw!;
		this._context = context;
		var params = context.parameters;


		if (params.fileName.raw?.startsWith('yes') && (this.isrendered !== true)) {
			console.log("pcf fired");
			this.isrendered = true;
			return;


		}
	}


	public getOutputs(): IOutputs {
		return {
			//controlValue: this._value
		};
	}
	public pdfReady(doc: any): void {

	}
	public destroy(): void {
		//	this.inputElement.removeEventListener("input", this._refreshData);
	}

	public delay(ms: number) {
		return new Promise(resolve => setTimeout(resolve, ms));
	}

	public exportToPDF(data: string) {
		try {
			//window["html2canvas"] = html2canvas;
			const doc = new jsPDF();
			var width = doc.internal.pageSize.getWidth();
			var height = doc.internal.pageSize.getHeight();
			doc.setFontSize(40);
			doc.text("Sample Header", 10, 10);
			doc.line(width / 4, height / 4, width, height / 4);
			console.log("html method called!");
			doc.html(`<!DOCTYPE html>
			<html>
			<body>
			<h2>Text input fields</h2>
			<p>Note that the form itself is not visible.</p>
			<p>Also note that the default width of text input fields is 20 characters.</p>
			</body>
			</html>
			`, {
				callback: (doc) => {
					console.log("html is getting Called Back..!");
					doc.save();
				}
			}

			);
			//doc.save();
		} catch (error) {
			console.log(error);
		}
	}

}

[balumallisetty]

@DianaBirkelbach /@ben-thompson / @srasmussen 

Could you assist with Above question? 

I posted Tagging #jspdf in stackoverflow, https://stackoverflow.com/q/73095905/4491572. Looks Issue is with PCF and JSPDF combination