jsPDF - I need help embedding a pdf onto a web page - javascript

I'm using jsPDF to create a pdf that will be displayed on a web page but I can't seem to get it to embed correctly. The pdf does load if I put in doc.output('dataurl'); but it loads in a new window (I know that is what it's supposed to do). I made a div that uses object tags to hold the pdf and it does load a pdf file but it wont the load the jsPDF. What I'm trying to do is make an embedded pdf like the one on their main page, https://parall.ax/products/jspdf. What code would I need to add in order to get it to load in the object tags? It has to be possible since they have a working version.
p.s. I'm using JQuery if there is a quick shortcut in there.
Thank you for your help.
EDIT: Ok new problem. So I added this: $('#ID').attr("src", doc.output("dataurlstring")); It works but it makes a new problem. It doesn't always load. Sometimes it loads just fine, other times it will load the div but not the iframe or content. There aren't any errors and all my console.log() lines run. How can I fix this?

Related

My image called to is not showing up

I am new to coding and trying to make a chrome app which basically displays a bunch of fake error messages. I called to the image with a button, but the image is not showing up. Could someone please help and tell me what I am doing wrong?? Here is the code;
I was having some trouble with the putting the code in, so...
http://pastebin.com/iTtmLVE5
There's nothing wrong with ur code, but with its implementation. First open console (F12) and check if js file has been loaded properly. Also You should really consider where to put ur external javascript files. Usually they are placed in html head tag or just before closing body tag .
The difference between both of them is that, if u place js file in header, its loading priority is high, so it loads before DOM (Document Object Model, so just a HTML structure) and when u place it before body closing tags, DOM will load first, so user can see inetrface faster (Since js is loading after browser renders it).
After copy & paste of ur code and making a little cleaning it works. What i've done was deleting all unneccessary HTML code, changing js file name to something more expressive (in my case script.js) and everything worked well.

How do display a PDF inside of a div-container in Phonegap?

I'm currently working on a Phonegap App, previously developed by another programmer.
Right now he's using the ChildBrowser plugin to display pdf documents.
Now we want to / have do display the pdf files next to another sidebar, which is why I need the pdf inside of another div instead of ChildBrowser's new window.
I tried on using pdf.js, pdfobject.js witch no success. Embedding the PDF in the html object tag worked, but I could not scroll it. Are there any hints out there I might have missed?
I think this post will solve your problem.
Open pdf using phone gap
It explains how you use child browser plugin to view pdf file but you need use child browser to Android and other to iOS.
Consider using pds.js to render PDF in HTML5: https://github.com/mozilla/pdf.js
Alternatively, embed pdf as iframe or object: PhoneGap Inline PDF

jQuery Copy text inside iframe to main document?

Hopefully someone here can help me with this challenge!
I have a parent page which is the checkout page for an e-commerce site. It's run on zencart and for every order placed a table row is generated through ZenCart. I've setup an EACH function which generates an iframe for an artwork uploader for each TR (order) found. The uploader works and the correct number of instances are being generated.
I wanted to avoid an iFrame, but the uploader script I purchased will not permit me to load it directly into the zencart page template, or via AJAX (tried both). There's some kind of major resource/path situation going on when doing it this way... so I've resorted to iframes.
I'm able to call JS on file-upload-complete. At that point I'm trying to capture the name of the filename that was just uploaded and place it inside the TR. The problem I'm running into are permission error when trying to access the iframe contents.
I've tried everything I've come across on this site and many others, so believe it isn't a problem with the selectors/frame selection... Firebug is telling me that I'm getting permission errors when trying to access the iframe, yet they're both on the same domain and the src is being set by a relative path....
I'm completely lost, any suggestions would be appreciated! Thanks!
www.prothings.com/store
Add items to the cart and go to checkout.....
when you want to access main window or window.document from inside an iframe you should change the context by using window.parent
For example when you want to append some text to a div, you should do something like this
window.parent.$.('#theDiv').text('the text');
There is a bug in IE when you run the code from inside the iframe and remove the iframe in between. IE can't run the code in the fly

Control PDF using javascript in web browser

I want a frame with a PDF document. The main document will use javascript to tell the PDF document what page to display and zoom level. Can this be done? If so, how or could you point me to documentation on it. Thanks.
You can't/shouldn't do it in a frame, but you can create an <object> on your page that is controllable using the JavaScript API.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/js_api_reference.pdf
Not easily. It all depends on what's being used to display the PDF in the browser. Not all browsers have built-in PDF viewers, and then there's many different external viewers (e.g. Acrobat, Fox-It, etc...) as well. As far as I know, there's
You can try hacking up the URL like this:
http://example.com/somedocument.pdf#page=5
but this may work in Acrobat only, as documented here: http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf
Do you need a PDF reader to be loaded and running? If not, you could write a back end script/program to render a specified page as an image (GIF, PNG, etc.) at a particular zoom level. Then your main page could load an image with something like:
<img src="render_pdf?page=4&zoom=150">
The src value could be controlled with javascript to make it dynamic.
To convert from PDF to an image in your render_pdf script, you can use ghostscript, or an image specific library like ImageMagick or GD, depending on what backend technology you are using.
Have a look at jsPDF - it may not output a .pdf onscreen in IE6 and IE7 due to limitations with datauri's, but its a good start. I dont see why this couldnt be built up in an iframe either.
As Jordan pointed out, you should use the <object> tag to embed the PDF. Then, in the PDF itself, you need to embed Javascript to handle the messages you pass in, such as:
if(!this.hostContainer.messageHandler) this.hostContainer.messageHandler = new Object();
this.hostContainer.messageHandler.onMessage = handleMessage;
function handleMessage(msg) {
// do stuff here
}
Finally, in your HTML JS, you pass messages in with:
document.getElementById('yourpdfobject').postMessage('some message or array');

How to convert a web page to PDF or image using Javascript?

I have created a graphics using jquery. and i want to convert this web page to pdf or an image. Which one is simpler? but when I convert this page to pdf that graphic will not shows. can any help me to solve this problem??? please refer some code.
JavaScript is interpreted by the browser, not by the HTML -> PDF application. I'd recommend using wkhtmltopdf, as it uses Webkit to render, so maybe that would fix your problem.
To try to render the page that includes JavaScript, fire up Google Chrome (or another browser with a DOM Inspector of sorts), open your webpage, right click and select Inspect Element, right click , click Edit as HTML, and copy & paste the HTML into a new text document, save it, and use that instead to convert to a graphics.
You have to go through a complicated process like this because that application that your are using renders only HTML + CSS, and doesn't even parse the JS. The DOM inspector shows the HTML pages as it currently looks, not when it was loaded.
I hope I didn't make it too complicated...

Categories

Resources