Accessing PDFium plugin methods with JS in Chrome 2019 - javascript

I would like to access the PDFium API, that is the pdf viewer in Chrome.
It is not clear what can I do.
Some old questions give some hints.
does pdfium expose its api to javascript? i want to get the number of current page, but how to do this?
Call pdfium (chrome native pdf viewer) from javascript
I created a HTML file but I see that the methods of the plugin are not working.
<html>
<body >
<embed id='embedId' width='100%' height='100%' name='plugin' src='C:\path\file.pdf' type='application/pdf' />
<input type="button" value="Click me" onclick="embedEl=getElementById('embedId'); embedEl.selectAll();">
</body>
</html>
I would like to know whether the API is available at present time in Chrome (so to be able to build something upon it) or not.

Hi you can find some API methods here:
https://cs.chromium.org/chromium/src/chrome/browser/resources/pdf/pdf_scripting_api.js
Here is a basic example, it gives out an alert when the PDF loads.
<html>
<body style="overflow:hidden;">
<embed width="100%" height="100%" id="plugin" src="test.pdf" />
<script type="text/javascript" src="pdf_scripting_api.js" />
var plugin = document.getElementById("plugin");
var scriptingAPI = new PDFScriptingAPI(window, plugin);
scriptingAPI.setLoadCallback(function(success)
{
alert(success);
});
</script>
</body>

Related

Handle user clicks inside an html5 iframe using jQuery

I am trying to present a new feature on a website already in production. Therefore, I am loading this website using an iframe into my development server as follows:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="myframe" src="https://production_website.com" style="border:none;" width="100%" height="600" seamless></iframe>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
console.log($("#myframe").contents());
$("#myframe").contents().find(".importantContent").click(function(){
console.log($(this));
});
</script>
</html>
I am trying to intercept user clicks on a specific DOM element in the iframe zone, based on that I'll be injecting a specific HTML content to demonstrate a feature. But listening with jquery click() is not working.
Any suggestions on what to do?
I am aware of the same origin policy restriction, but for a web designer/developer who doesn't have control over the server, aren't there workarounds like disabling the restriction using a pluging?
example: https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
I found this answer in another thread, and it looks like it may work on your end. Try:
$('#myframe').load(function(){
var iframe = $('#myframe').contents();
iframe.find(".importantContent").click(function(){
alert("test");
});
});
Also, you have $("#reco").contents() instead of $("#myframe").contents(), were you meaning to not use the iframe you have in this example?

How do I add text to a paragraph tag via JQuery?

I'm trying to write my first chrome extension to test my acquired knowledge from codecademy (HTML/CSS, JQUERY and Javascript). First of all I'm trying to append text to a paragraph tag via the onclick of a button.
heres my code:
<!doctype html>
<html>
<head>
<title>Facebook event graph</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script src="popup.js"> </script>
</head>
<body>
<form id="inputUrl">
Enter a URL: <input type="text" name="url" id="url">
<button type="button" onclick="getFacebookData()"> Get Data </button>
</form>
<canvas id="graph" width="300" height="100">
</canvas>
<p id="text" width="300" height="100">1</p>
</body>
</html>
and my popup.js:
$(document).ready(function(){
//Variables
function getFacebookData() {
$('p').append('Test');
};
});
it's probably something very basic that I'm doing wrong, but a push in the right direction would be really appreciated :)
You are not allowed to use inline scripting like onclick="getFacebookData()"
You have to remove the handler from html:
<button type="button" id="my-button"> Get Data </button>
And you have to move the handler into popup.js:
$(document).ready(function(){
$('#my-button').click(getFacebookData);
});
You are also, by default, not allowed to load jQuery from an external CDN - and certainly not http one, again for Content Security Policy reasons. And you shouldn't! Put jQuery in your extension's folder and load it locally.
Matter of taste, but I would place getFacebookData() definition outside $(document).ready, so it's available in the global scope. Also, the semicolon after it is not needed.
Last, but not least: for future debugging, inspect the console of the corresponding page of your extension. For things like background/options page you should be able to access them from Developer Mode extensions list. For a popup, you should right-click the button of your extension and select "Inspect Popup".

Calling WPF Application Function from JavaScript Button

I have a xbap application and i would like a javascript button to call a function from this application.
I've read something on Internet and it seems i have to use either a webcontrol (is that correct?) or an object control whom to pass an id or something. How should i do that exactly? A small Vb.Net example would be useful.
Let's assume i have this class:
Class Page1
Public Sub Callback()
MsgBox("Something")
End Sub
End Class
And i have a html file with an iframe that looks like this:
<html>
</head>
<script>
function something() {
var ctrl = document.getElementById("testControl");
ctrl.Callback();
}
</script>
</head>
<body>
<object id="testControl" name="testControl" classid="clsid: ..." width="0" height="0"></object>
<input type="button" value="Change Size" onclick="something()" />
<br/>
<script>
document.write('<iframe id="frame1" name="frame1" width="200" height="197" src="http:// .... .xbap?id=' + 1 + '" frameborder="1" border="1" style="border: 1px solid #000000;" />');
</script>
</body>
</html>
How should i configure my vb.net class and html file so that it works? thank you.
This question seems to be unanswered, and is most likely bit duplicate with other questions out there.
But any how, I have created a blog post where there is a javascript button that calls function from xbap. This solution works with latest browsers out there.
Check it out at:
http://hotzblog.com/xbap-and-javascript-with-ie9-or-newer-solution-for-missingmethodexception-problems/

How to send a pdf file directly to the printer using JavaScript?

How to send a PDF file directly to the printer using JavaScript?
I found two answers in a forum:
<embed src="vehinvc.pdf" id = "Pdf1" name="Pdf1" hidden>
<a onClick="document.getElementById('Pdf1').printWithDialog()" style="cursor:hand;">Print file</a>
and
<OBJECT id = "Pdf2" name="Pdf2" CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" WIDTH="364" HEIGHT="290">
<PARAM NAME='SRC' VALUE="file.pdf">
</OBJECT>
<a onClick="document.Pdf2.printWithDialog()">Print file</a>
But my problem is that it just works on IE, and doesnt work in Firefox or Chrome.
Is there any solution for this?
I think this Library of JavaScript might Help you:
It's called Print.js
First Include
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">
It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf')
What I did was something like this, this will also show "Loading...." if PDF document is too large.
<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
Print PDF with Message
</button>
However keep in mind that:
Firefox currently doesn't allow printing PDF documents using iframes. There is an open bug in Mozilla's website about this. When using Firefox, Print.js will open the PDF file into a new tab.
There are two steps you need to take.
First, you need to put the PDF in an iframe.
<iframe id="pdf" name="pdf" src="document.pdf"></iframe>
To print the iframe you can look at the answers here:
Javascript Print iframe contents only
If you want to print the iframe automatically after the PDF has loaded, you can add an onload handler to the <iframe>:
<iframe onload="isLoaded()" id="pdf" name="pdf" src="document.pdf"></iframe>
the loader can look like this:
function isLoaded()
{
var pdfFrame = window.frames["pdf"];
pdfFrame.focus();
pdfFrame.print();
}
This will display the browser's print dialog, and then print just the PDF document itself. (I personally use the onload handler to enable a "print" button so the user can decide to print the document, or not).
I'm using this code pretty much verbatim in Safari and Chrome, but am yet to try it on IE or Firefox.
This is actually a lot easier using a dataURI, because you can just call print on the returned window object.
// file is a File object, this will also take a blob
const dataUrl = window.URL.createObjectURL(file);
// Open the window
const pdfWindow = window.open(dataUrl);
// Call print on it
pdfWindow.print();
This opens the pdf in a new tab and then pops the print dialog up.
Try this: Have a button/link which opens a webpage (in a new window) with just the pdf file embedded in it, and print the webpage.
In head of the main page:
<script type="text/javascript">
function printpdf()
{
myWindow=window.open("pdfwebpage.html");
myWindow.close; //optional, to close the new window as soon as it opens
//this ensures user doesn't have to close the pop-up manually
}
</script>
And in body of the main page:
Click to Print the PDF
Inside pdfwebpage.html:
<html>
<head>
</head>
<body onload="window.print()">
<embed src="pdfhere.pdf"/>
</body>
</html>
a function to house the print trigger...
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
an button to give the user access...
(an onClick on an a or button or input or whatever you wish)
<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />
an iframe pointing to your PDF...
<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>
More : http://www.fpdf.org/en/script/script36.php
<?php
$browser_ver = get_browser(null,true);
//echo $browser_ver['browser'];
if($browser_ver['browser'] == 'IE') {
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf print test</title>
<style>
html { height:100%; }
</style>
<script>
function printIt(id) {
var pdf = document.getElementById("samplePDF");
pdf.click();
pdf.setActive();
pdf.focus();
pdf.print();
}
</script>
</head>
<body style="margin:0; height:100%;">
<embed id="samplePDF" type="application/pdf" src="/pdfs/2010/dash_fdm350.pdf" width="100%" height="100%" />
<button onClick="printIt('samplePDF')">Print</button>
</body>
</html>
<?php
} else {
?>
<HTML>
<script Language="javascript">
function printfile(id) {
window.frames[id].focus();
window.frames[id].print();
}
</script>
<BODY marginheight="0" marginwidth="0">
<iframe src="/pdfs/2010/dash_fdm350.pdf" id="objAdobePrint" name="objAdobePrint" height="95%" width="100%" frameborder=0></iframe><br>
<input type="button" value="Print" onclick="javascript:printfile('objAdobePrint');">
</BODY>
</HTML>
<?php
}
?>

Can't set data property of an HTML object element with javascript

The following works in current Firefox (PDF loads), but not in current IE (page is blank). Any suggestions?
<head>
<script type="text/javascript">
function startup() {
var bubba = document.getElementById('bubba');
bubba.data = 'http://server.qa/test.pdf';
}
</script>
</head>
<body onload="startup();">
<object id="bubba" type="application/pdf" width="80%" height="800">
No PDF reader installed
</object>
</body>
You won't be able to display the PDF like that. The syntax for including plugins differs between IE and Forefox.
I would recommend using an <iframe> instead of an <object> and using JavaScript to set the iframe's src attribute. This should invoke whichever PDF plugin is installed in the browser, or download the PDF if none is.

Categories

Resources