I need to resize pdf object (ie to make control in the lower right corner pulled by mouse)
It doesnt react on my line resize='both'.
What should i write in css?
Heres my code:
<object data='http://aspirant.beget.tech/upload/images/1.Pdf'
type='application/pdf'
width='100%'
height='100%'
resize='both'>
<p>This browser does not support inline PDFs. Please download the PDF to view it: Download PDF</p>
</object>
It is easier if you wrap your object element to div sample answer
Related
I am showing embedded iframe document in my application, what I am trying to do is hiding menu button from top bar in Webview of this embedded iframe. I am using DocumentCloud platform for storing and retrieving the documents, DocumentCloud gives me the link of my document and I add that my html and rendering it using react-native-webview. This is my iframe tag link, you can open it browser. I did tried achieving this using changing fields/options in iframe src url which is probably best solution for it, but I couldn't find any option to turn that thing off in document cloud documentation. I am getting this results.
I want to hide the the menu icon shown in top bar in above image.
iFrame looks like this
<iframe loading="lazy" src="https://www.documentcloud.org/documents/282753-lefler-thesis.js" width="700" height="800" sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox" frameborder="0"></iframe>
This is how I am rendering Webview.
<WebView
scrollEnabled={false}
onMessage={callback}
style={styles.container}
containerStyle={styles.viewContainer}
source={{
html: htmlRender(
iframe
),
}}
/>
htmlRender method is wrapping iframe within in html and doing some styling and reporting the height and width of iframe.
You can injectJavaScript and query these buttons with 2 selectors:
document.querySelector('.hamburger')
returns div with svg
document.querySelector('.fullscreen')
returns span with svg
Hiding is something like:
document.querySelector('.hamburger').style.display = "none";
ff.findElementByxpath(//object[# id='slPlugin2']).click();
is not recognizing the element.
And also suggest me the way to upload media through webdriver
<table class="imgTable photoTable" cellspacing="0">
<div id="fileUploadControl404" class="fileUpload t-toolbar t-grid-toolbar t-grid-top">
<object id="slPlugin2" width="117" height="32" data="data:application/x-silverlight," type="application/x-silverlight">
<param value="/LMM/ClientBin/FileUpload.xap" name="source">
<param value="Url =https://lmmwipqa.blob.core.windows.net/uploads?se=2013-12-28T07%3A18%3A43Z&sr=c&sp=w&sig=fxuPdwl4huKRISO%2BCPdZIQxh0i5cdnGjWKO8okj2O34%3D, Parent =fileUploadControl404, Caption =Add Photo" name="initParams">
</object>
</div>
//object[# id='slPlugin2']
The above parameter should be within double quotes,i.e., a string should be passed as parameter to findElementByXPath().
The required statement can be rewritten as follows :
ff.findElementByXPath("//object[#id='slPlugin2']").click();
With respect to clicking on invisible elements, the following statement can be used :
(Note : This assumes the page has jQuery on it)
((JavascriptExecutor)driver).executeScript("$('selector_of_element').click();");
For file upload you can refer this.
I think, ff.findElementById("slPlugin2") would be more shorter way to find the element,
but, anyway unfortunatelly, WebDriver will be not be able to handle the elements
inside the Silverlight embeded app.
I'd recomend to get the parent div: ff.findElementById("fileUploadControl404")
Get its coordinates with .getLocation();
Use Java Robot
or Sikuli in order to manipulate the embeded control.
I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.
<embed src="filename.pdf?zoom=50" width="575" height="500">
does anyone know how to modify the code so its initial zoom is set to fit the object size.
Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.
Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:
filename.pdf#view=FitH
What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.
For a full list of available parameters see this doc
EDIT: (lazy mode on)
For me this worked(I wanted to zoom in since the container of my pdf was small):
<embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
This method uses "object", it also has "embed". Either method works:
<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
just in case someone need it, in firefox for me it work like this
<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
Followed #Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.
I shared for whom concern about view base64 content PDF file with object tag using Angular framework.
The option for view PDF
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
Read PDF content from API as
let content = DataHelper.getDataFromAPI();
When click show content button use
showData() {
let content = DataHelper.getDataFromAPI();
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
}
In HTML file use object tag as
<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>
Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb
Bit late response to this question, however I do have something to add that might be useful for others.
If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH
Use iframe tag do display pdf file with zoom fit
<iframe src="filename.pdf" width="" height="" border="0"></iframe>
This works fine for me
<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
I have a page that contains an iframe element. I want to have some text on the main page when clicked to change the iframe source. I can do that with an "a href" tag but the main page resets to the top instead of where the user was last on the page vertically. If I use an input type=button element, then it works just fine without resetting to the top of the main page. However, I want the look of just text on the page (with an underline) instead of a button look. How can I do this?
use target
Go to page 2
<iframe src="page1.html" frameborder="0" name="test"></iframe>
you can use a div or span (actually pretty much any element) instead of a button
<div onclick="iframe.src='new.html'" class="lookcool">sometext</a>
Not sure what you have done so far, but it seems like you want to change the page displayed in an iframe. To do that with a link, you can use target or javascript:
Target:
link
<iframe name="iframe" src="http://www.example.com" />
Javascript:
link
<iframe id="iframe" src="http://www.example.com" />
I embedded a default media player into my webpage with the following html
<object height="20" width="200">
<embed src="url to music" autostart="false" loop="false" height="20" width="200">
</object>
Everytime I go to the website, this object automatically downloads the music. How can I disable the autodownload? I want it to load only when someone clicks on the play button.
I've been looking around today, and I see no way to instruct the browser to do exactly that.
The best way I can think of is instead of the <object ...>, you display an image which looks like the player, then you add an onclick property to the image, and you use javascript to replace the image with the real object. Something like :
<div><img src="player.png" onclick="this.parentNode.innerHTML = '<object height=\'20\' width=\'200\'> <embed src=\'url-to-music\' autostart=\'false\' loop=\'false\' height=\'20\' width=\'200\'> </object>'"></div>
I should add that you have to keep the <div> around the image (or put a <span>, or whatever tag you see fit) because the onclick action replaces parentNode.innerHTML, that is, the HTML contained in the parent, which in this case, is the image.