Reputation: 36
I am trying to use FlowPaper Viewer from my Angular 4 app. but I get the following error :
core.es5.js?de3d:1020 ERROR TypeError: $(...).FlowPaperViewer is not a function
Can anyone please help me to figure out the problem or give me an alternative solution where I can display the pdf from blob?
Or can suggests me any other pdf viewer (better reader with nice look and feel) where I can display pdf from blob?
I tried as following (in Jhipster Angular 4 app): I have included the JS and CSS files manually in my project folder like:
webapp/content/css/flowpaper.css
webapp/content/js/jquery.min.js
webapp/content/js/jquery.extensions.min.js
webapp/content/js/fpsmeter.min.js
webapp/content/js/three.min.js
webapp/content/js/flowpaper.js
webapp/content/js/flowpaper_handlers.js
webapp/content/js/FlowPaperViewer.js
webapp/content/js/flowpaper.worker.js
then add the reference in the angular-cli.json file as following:
"styles": [
"content/css/vendor.css",
"content/css/global.css",
"content/css/flowpaper.css"
],
"scripts": [
"content/js/jquery.min.js",
"content/js/jquery.extensions.min.js",
"content/js/fpsmeter.min.js",
"content/js/three.min.js",
"content/js/flowpaper.js",
"content/js/flowpaper_handlers.js",
"content/js/FlowPaperViewer.js",
"content/js/flowpaper.worker.js"
]
In the Html file added :
<div id="documentViewer" class="flowpaper_viewer" style="position:absolute;;width:100%;height:100%;background-color:#222222;;"></div>
in the component I declare jquery variable:
declare var $:any;
on receive pdf blob file I called :
uint8Array = new Uint8Array(arrayBuffer);
$('#documentViewer').FlowPaperViewer(
{ config : {
PDFFile : uint8Array
}});
and I see in the chrome console :
core.es5.js?de3d:1020 ERROR TypeError: $(...).FlowPaperViewer is not a function
Upvotes: 0
Views: 896