PhoneGap Inline PDF - javascript

I am having some issues getting PDFs to display inline in PhoneGap. Right now, I am loading the PDF into an Object and then trying (and failing) to set the object dimensions to the window height so it's displayed full-height (with app header and back button).
Javascript:
<script type="text/javascript">
function jqUpdateSize(){
var pixels = $(window).height();
pixels = pixels - 48;
$('#pdfViewer').height(pixels);
};
$(document).ready(jqUpdateSize)
$(window).resize(jqUpdateSize);
</script>
HTML:
<div data-role="content" style="padding:0px; height:auto;">
<object width="100%" height="100%" data="file.PDF"></object>
</div>
This partially works (it works PERFECTLY in Chrome/FF on my desktop) but fails miserably and doesn't work in-app on both Android and iOS.
I saw some documentation about a plugin "ChildBrowser", but I'm not sure it will do what I want or how I would go about getting it setup.

you should try adding iframe instead of object..
<iframe width="100%" height="100%" src="file.PDF">
</iframe >

You may consider using pdf.js to render PDF: https://github.com/mozilla/pdf.js

Related

how to interact with shadow DOM elements for take the file.pdf with selenium 4.x, using php and chrome driver V95.0.?

Explain better:
I am automating the issuance of a certificate that is being generated in iframes
Through the selenium grid I managed to get to this last screen where the pdf is
I tried to print the screen with window.print running a javascript, I see the window for print but I couldn't proceed
:
$this->driver->executeScript("window.print()");
document.querySelector('pdf-viewer').shadowRoot.querySelector('viewer-toolbar').shadowRoot.querySelector('viewer-download-controls').shadowRoot.querySelector('cr-icon-button').click();//this work in browser, nope with selenium
From where I am I think there could be some ways to solve which I tried but didn't make any progress:
after windows.print() ,
press o key enter, maybe(two times),
click button save
maybe using keyboard control + s , key enter
right click, save page as, confirm
maybe using control + p
maybe using mouse for click in arrow down for download, but I got not find element, or dont know how to use coordinates for mouse
set preferences/capabilities for browser for when the window.print() not show where I liked save my pdf
I too tried set a preferences
I too tried $this->driver->getPageSource();
$options->addArguments(['--print-to-pdf']);
that I find here but not sure if it is working or how to use it.
<iframe src="asintegrarelatorio?UGsAuJNIMg0Bs79efCz_UN+WLY3wJLa3shybBaN2MhtwcBuQ28HYLHZjlWoShKh3akHt0HZM3+pL7TP3ksZMQQ==" name="EMBPAGE" width="900px" height="500px" frameborder="1" align="center" title="" style="" scrolling="auto">
<html><head><script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script></head><body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);"><embed name="C065A881B0E7E51799DF65DCF351573F" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="C065A881B0E7E51799DF65DCF351573F"></body></html>
</iframe>
driver.execute_script('document.querySelector("#printDiv > a").setAttribute("onclick","setTimeout(() => window.print(), 0);")')

How to display an image on an iFrame?

I have a div which contains an iFrame:
<div class="embed-responsive embed-responsive-16by9" id="camera_view_div">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="camera_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
I have an image url from my server and I am trying to set the iFrame's src to the image url. But it starts a download of the image url on update.
cameraView.src = event.info.data['image_url'];
How to set an image url on an iFrame and display it?
as scrappedcola said, this is an odd usage of iframes, but I'll assume you have a powerful argument for it.
I can think of two possible solutions:
The headers of the image being sent by the server are not adecuate
for it to be displayed in the iframe, the browser might just
interpret it as a binary file to download. Check if you can adjust them.
https://jsfiddle.net/0ftobver/2/ << check the headers of the placeholder image
Use srcdoc or injection of html in the iframe, something like:
cameraView.srcdoc = '<!html doctype><style>*{padding:0;margin:0}</style><img src="https://via.placeholder.com/350x150">'
https://jsfiddle.net/q3rvd418/2/
Injection would be similar but accesing the contentDocument property of the iframe.

how to set image, text size as screen resolution using javascript

how can I set image, text size as screen resolution using javascript in asp.net mvc project?
<body>
<div id="div1"><p>Font size</p>
<img src="/Content/image.png" width="200" height="200"/>
</div>
</body>
u need to try this plugin in your project i hope it solve your problem
https://github.com/davatron5000/FitText.js

embeded custom google map wont display without refresh

I built 2 custom google maps for a site and have embeded them with iframes on a mobile site: mobile.moodyplumbingmpi.com The maps do not display the custom map but a map of the Southern Hemisphere when first viewed by taping service areas. If I hit refresh, the correct maps display. Wondering if I am missing some sort of jquery command to display on opening or something like that. I am completely stuck on this. Any help would be greatly appreciated! Mike
Here is the code for the section that displays the maps:
BackMoody Plumbing
<article data-role="content">
<h2>Moody Plumbing Service Area</h2>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>
<h3>Warren Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small>View Larger Map</small>
</li>
<li>
<h3>Youngstown Service Areas</h3>
<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small>View Larger Map</small>
</li>
</ul>
</article>
<nav data-role="footer">© <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing Visit Full Site
</nav>
So your issue is that the iFrames containing the maps are being built while they are hidden. This confuses the Google MapsEngine API which expects the viewport window to be properly sized and visible. When you toggle the iFrame's visibility from the "Service Areas" button, the MapsEngine just plunks down at zoom 1 at lat/lng 0,0.
I think one solution is to dynamically re-set the SRC of the iFrames when the "Service Areas" button is pressed. Change the two iFrame tags to include a unique id:
<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...
Then add a simple script into the HEAD of the HTML document; I didn't think of this, it came from: Reload an iframe with jQuery
<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
$('#location1').attr('src', function(i, val) { return val; });
$('#location2').attr('src', function(i, val) { return val; });
});
</script>
The reload is a bit jumpy. So other possible options to consider include:
dynamically trigger a refresh of the iFrames when the "Service Areas" button is pressed; there is code online for this but it does not appear to work in all types of browsers.
Put a couple of DIVs in as placeholders, then use javascript to insert the iFrame HTML as innerHTML of the DIVs.
Find a way to trigger a map RESIZE event [google.maps.event.trigger(???, "resize");] similar to one of the answers in the following link; I don't know if this is possible using the MapsEngine: google maps not displayed correctly unless refreshing
You do need to make sure about the timing of events. The #locations SECTION needs to be completely visible before attempting any of the above to allow the MapsEngine initialization to work properly. You will need to set an event to know when the SECTION has become visible before poking at the iFrames (the jQuery pageshow event does this as provided in the code sample above).
Finally, I'm not sure if you built the maps using Google's MyMaps or using Google MapsEngine. If you indeed used MapsEngine, you need to be aware that Google is terminating the MapsEngine at the end of 2015, and these two maps will become non-operable.

Embed PDF on webpage and scroll horizontally to center it

I have added a PDF to a webpage using the embed tag. The width of the embed window is smaller than the width of the PDF. So, A horizontal scroll bar appears. However, there are wide margins on the left and the right of the PDF document itself. If user scrolls center to the PDF, the PDF's content fits perfectly.
I would like to have this scrolling happen automatically if possible.
The code is here http://shop.stelladoradus.com/product/gsm-repeater/
You must click on the specification tab to see the PDF.
For google chrome I did the following:
I used an Iframe instead of the embed
<iframe id='pdf_embed' height='1300' style='width: 734px; margin-left: -40px;' src='iframe_url?pdf=pdf_url.'></iframe>
on the iframe page I have:
<style>
object{
width: 200%;
margin-left: -370px;
margin-top: -150px;
}
embed{
width:100%;
height:95%;
}
</style>
<html>
<body >
<object height='1430' data="<?php echo $_GET['pdf']; ?>" type="application/pdf">
<embed height='1430' src="<?php echo $_GET['pdf']; ?>" type="application/pdf" />
</object>
</body>
</html>
This solution is actually exactly what I was looking for, as the pdf is zoomed in so the margins aren't showing, and its easier to read (bigger text). I couldn't get it to work for firefox or IE, for that you can use #Infer-On solution below.
Ok I think you have only to pass some paramenters to your PDF, as specified from documentation:
You could try something like this:
zoom=scale
Sets the zoom and scroll factors, using float or integer values. For
example, a scale value of 100 indicates a zoom value of 100%.
or else
view=Fit
Set the view of the displayed page, using the keyword values defined
in the PDF language specification. For more information, see the PDF
Reference.
See the related documentation to find the parameter will better fit for you
http://example.org/doc.pdf#zoom=50
http://example.org/doc.pdf#view=Fit,100
EDIT
What i already tried:
<object data="http://www.stelladoradus.com/wp-content/uploads/2014/03/en_spec_RP1000G3.pdf"
type="application/pdf"
width="300" height="500">
<param name="view" value="fit" />
</object>
http://jsfiddle.net/InferOn/wVaGa/23/
this works, but not in Chrome...

Categories