I just started using the monocle reader and tried using a pdf i downloaded before it has roughly 800 pages and 25mb file size, the problem now is that monocle returns with this error
TypeError: Cannot read property 'onFirstPageOfBook' of null
Resource interpreted as Document but transferred with MIME type
application/pdf
If i use a 1 page pdf it works fine.
This is my code:
<script type="text/javascript">
var bookData = {
getComponents: function () {
return [
'coolresume.pdf',
'content1.html'
];
},
getContents: function () {
return [
{title: "Chapter 1", src: 'coolresume.pdf'},
{title: "Chapter 2", src: 'content1.html'}
]
},
getComponent: function (componentId) {
return {url:componentId};
},
getMetaData: function(key) {
return {
title: "Test document",
creator: "Aron Woost"
}[key];
}
}
Monocle.Events.listen(
window,
'load',
function () {
window.reader = Monocle.Reader('reader', bookData);
}
);
</script>
the monocle
This is were i got my sample PDF, this also works fine for when the same PDF is converted to EPUB
PDF URL
PDFs may not be officially supported by monocle js: https://groups.google.com/forum/#!searchin/monocle-js/pdf/monocle-js/0ue1t243JLg/hgOPIQaramQJ
However some PDFs work and some don't. I've tracking the ones that don't down to the monocle js source code, lines 3555, 3556, 3557:
Monocle.Events.listen(frame, 'load', onDocumentReady);
Monocle.Events.listen(frame, 'load', onDocumentLoad);
frame.contentWindow.location.replace(url);
...using PDF as a source, a url value is sent to the frame.contentWindow.location.replace function, but with some PDFs the load event is not firing, therefore the previously attached functions do not execute and the script stalls with a blank page, but other PDFs load fine.
Also, when I run the monocle HTML page through the theseus debugger, the failing PDFs also load just fine.
Another point, monocle js is loading the PDFs in an embed tag. The same embed tag code loaded independently of monocle js loads just fine. And the ones that work load 2 pages, both embed tags with the same PDF url. The ones that don't work only get one embed tag implemented but not all the monocle id's are there.
It may be related to file size. I was not able to load a PDF at 555K, but 412K and lower loaded fine.
It's a nasty hack, but this loads the PDFs that won't otherwise:
//Monocle.Events.listen(frame, 'load', onDocumentReady);
//Monocle.Events.listen(frame, 'load', onDocumentLoad);
frame.contentWindow.location.replace(url);
onDocumentReady();
onDocumentLoad();
Related
I want to use jsPsychHtmlButtonResponse to display a .txt-file from a local folder on my computer.
The reproducible code below does not work, while a very similar adaptation works for the display of images with jsPsychImageButtonResponse.
Does not work:
var text_display = {
type: jsPsychHtmlButtonResponse,
stimulus: text_files/test.txt,
choices: ["Ready"],
};
Works:
var image_display = {
type: jsPsychImageButtonResponse,
stimulus: images_files/test.png,
choices: ["Ready"],
};
Do you have any suggestions how to handle this problem?
Text files behave differently from image files in this context. While browsers can load an image file directly from a path, text files need to be loaded using more generic methods. This question has answers that demonstrate how text files are loaded. You could use fetch() to load in all the text files and assign them to variables that you then use in your experiment.
Alternatively, if you want something that is as close as possible to this experience without getting into fetch() calls, then you could put the text from your text file inside a JavaScript file and assign it to a variable.
var test_txt = `Contents from text file`;
Suppose that this has the filename test_txt.js. You can then load this in your HTML doc like you load other scripts (e.g., jspsych.js).
<head>
<script src="test_txt.js"></script>
</head>
Then you can use the test_txt variable in your code.
var text_display = {
type: jsPsychHtmlButtonResponse,
stimulus: test_txt,
choices: ["Ready"],
};
I'm trying to generate a PDF from a React component. In my scenario it is a MaterialUI table but it could be anything.
The problem I'm facing is not with generating the PDF but the produced PDF itself which is too heavy and unusable.
I have a function like this:
createPdf = async (html: HTMLElement, pdfName: string = "report.pdf") => {
const doc = new jsPDF("p", "pt", "a4", true);
await doc.html(html, {
margin: 10,
html2canvas: {
scale: 0.65
},
});
doc.save(pdfName);
return doc.output("blob");
};
I insert an HTMLElement which is the DOM content for my React component and it generates the PDF correctly. However this pdf is very big and extremely slow to load. Mind that I have an i9 with 32GB of RAM and it easily takes 15secs to render one page of the pdf...
Initially it was generating a 150MB pdf but then I set compressed to true and it's now around 600KB. That changes the size but it didn't improve the performance somehow. I've tried multiple computers and browsers and I've tinkered with the options for html2canvas and nothing seems to fix this.
Does anyone have any insight on this?
Thanks in advance.
I can get an SVG file downloaded, additionally, I can display svg files as you would normally within an image tag. I do not know how to access the folder location for downloads or the wgt-private folder so I may download images to a client's watch and then use the downloaded version.
I'm sure my file is downloading as I've console logged on successful download and when I list the items in the directory the file shows up.
Placing downloads/[filename] or wgt-private/[filename] does not appear to work as these are virtual file locations however I've no idea how to access these files within the application without using the filesystem methods.
Download:
var download_obj = new tizen.DownloadRequest('someFile.svg', 'wgt-private');//Hidden the actual location however this file does display when enterting the whole file location
tizen.download.start(download_obj, {
onprogress: function(id, receivedSize, totalSize) {
console.log(id);
console.log(receivedSize);
console.log(totalSize);
},
onpaused: function(id) {
console.log(id);
},
oncanceled: function(id) {
console.log(id);
},
oncompleted: function(id, fullPath) {
console.log(id);
console.log(fullPath);
},
onfailed: function(id, error) {
console.log(id);
console.log(JSON.stringify(error));
}
});
Full path comes out as: wgt-private/someFile.svg
Doesn't display as displays a file error in the console on all attempts.
I understand that your questions relates to how to show the image downloaded with tizen.download API in html img tag.
I can see two workarounds that could help you with it:
You can use filesystem API (which you would like to avoid), BUT since 5.0 there is a method which needs no additional privileges and I hope it will match your needs - FileSystemManager.toURI(). It just gets the path to file (returned by download API) and returns the full URI, able to be used in img.
I noticed that download to non-public directories on the device, download API returns the 'hidden' path which uses virtual root, but when downloading to public directory as 'downloads', the full path is returned and it works for img as well.
If both of above is not acceptable for you, I am afraid that the only alternative is to use regular tizen.filesystem API and resolve the path from download API and then use File.toURI() function to get the path.
var link = "http://techslides.com/demos/samples/sample.jpg"
var download_obj = new tizen.DownloadRequest(link, 'wgt-private');//Hidden the actual location however this file does display when enterting the whole file location
tizen.download.start(download_obj, {
oncompleted: function(id, fullPath) {
console.log("completed " + id + " : " + fullPath);
tizen.filesystem.resolve(fullPath, (s)=>{console.log("Resovled full path: " + s.toURI())}, (e) => {console.log(e)})
},
onfailed: function(id, error) {
console.log("failed " + id);
console.log(JSON.stringify(error));
}
});
You can find the proper web sample app: new Tizen project - Sample - Mobile 4.0 - Web application - Content - Download Manager
Open index.html and replace https://www.sample-videos.com/video/mkv/720/big_buck_bunny_720p_10mb.mkv with your file address.
Below are my codes in extension.js. If you look at the codes, I tried different ways to load the file to my extension. No matter what, I always getting
VM3051:15 Uncaught ReferenceError: PDFJS is not defined
Tried with putting the file in different locations.
appAPI.ready(function($) {
console.log("pdf min js loading");
appAPI.resources.includeJS('jspdf.js');
// appAPI.resources.includeJS('js/jspdf.js');
// appAPI.resources.includeRemoteJS('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js');
//$.globalEval(appAPI.resources.get('//cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js'));
console.log("done");
setTimeout(function(){
alert(window.location.href);
if(window.location.href.indexOf(".pdf") > -1) {
console.log("its a pdf");
alert("pdf");
var doc = new jsPDF();
}else{
alert($.trim($('div').find('h1,h2,h3,h4,h5,p,span').text()));
}
},6000);
});
Here is the file structure
I cannot modify manifest.json because the extension should be unique for all the browsers not just for chrome.
I'm confused, the two CloudFlare URLs in your code reference the project jsPDF. I would assume the local pdf.js does the same too.
In your code, you're using
PDFJS.getDocument();
This syntax comes from PDF.js which is a totally different project from Mozilla.
If you're sticking with jsPDF, your code should be something like:
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
Or you'll need to include the correct library for PDF.js.
After the edits you've made and your comments, it seems you've switch completely over to jsPDF but you're still getting the same error which clearly mentions PDF.js.
Are you sure you're debugging the correct and last version of your app which is only using jsPDF?
I've setup a small reproduction example on Crossrider using only jsPDF.
The extension.js code is the following:
appAPI.ready(function($) {
console.log("pdf min js loading");
appAPI.resources.includeJS('jspdf.js');
console.log("done");
var doc = new jsPDF();
console.log(doc);
});
When debugging the extension, I'm getting this result:
doc is an object containing an instance of jsPDF which I can later use.
There should be no mention of PDF.js whatsoever. My only guess could be that you're running / debugging a version of your extension still containing references to this project.
I'm trying to get my PDF javascript embedded code to communicate to its HTML container page. But I've been able to make it work only 1 way(HTML->PDF)
Maybe the problem is that the object tag is being generated dynamically( because I need to load pdfs on-the-fly)
js in my pdf file(runs in the OPEN action):
this.hostContainer.messageHandler =
{
onMessage: function(messageArray)
{
app.alert('msg received' + messageArray);
},
onError: function(error, messageArray){ },
onDisclose: function() {return true;}
};
try{
this.hostContainer.postMessage(["never", "delivered"]); // this line doesn't work. :(
}
catch(e){
app.alert(e.message);
}
my html page js code :
function messageFunc(messageArray) {
alert('finally!!');
}
$j('#pdf_div').html("<object type='application/pdf' data='http://url.to.dinamically.generated.pdf' id='PdfObject'> </object>");
$j("#PdfObject").ready(function() {
document.getElementById('PdfObject').messageHandler = { onMessage: messageFunc };
});
As I said, the PDF can receive the messages without problems, but I'm unable to send messages from the PDF to HTML code.
Btw, I'm using JQuery.
Any help would be really appreciated.
Thanks.