I am working on a project where we need to save the iframe content as a PDF or an image.
Currently, I getting issue where the PDF is just blank.
Does anyone has any solution for this ?
Thanks in advance.
Here is my code:
<html>
<head>
<script src="jspdf.umd.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js" ></script>
<script >
function createPdf(){
window.jsPDF = window.jspdf.jsPDF
var pdf = new jsPDF()
var element = document.getElementById("capture")
pdf.save("output.pdf")
}
</script>
</head>
<body>
<iframe id="capture" src="https://wikipedia.org/wiki/Main_Page" style=" width: 100%; height: 600px" frameborder="0"></iframe>
<button onclick="createPdf()">create pdf </button>
</body>
</html>
Related
I'd like to store SVG code in a separate file so I can clean up the main code.
I'm using this script in the <head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("icon").load("icon.xml");
});
</script>
and I'm calling the file like this:
<div class="logo">
<div id="icon"></div>
</div>
but nothing appears. This method is working for me for referencing as a separate html for nav links. Does this method not support other file types?
Due to typos, the SVG cannot be displayed. Here is the fix:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$("#icon").load("icon.xml");
});
</script>
<div class="logo">
<div id="icon"></div>
</div>
i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>
i have tried ace code editor i've pasted the exact code on my web page but it is not working can u please help me out i want my editor be like same as w3school code editor.
You don't seem to have ace.js in the path that you mentioned in the script src attribute.
Replace
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
with
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>
Use cdn in the script or you can get the libraries in your local and try that script
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>
I used iframe for delivering an image icon for the pdf links in an html page.
I have tried using overflow:hidden, scrolling: "no" etc for removing the scroll bar from iframe. But none of them is working in chrome. When tried in firefox,the scroll bar is removed,but image is not available. Please help me on this.
Here is the complete code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<title>Unit 3, ADS</title>
<style type="text/css">
/* one */
.imagewrap {
display: inline-block;
position: relative;
}
.icon-remove-sign {
position: absolute;
top: 0;
right: 0;
}
iframe{
overflow:hidden;
}
</style>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('i.icon-remove-sign').on('click',function(e){
e.preventDefault();
pdfID = $(this).closest('.imagewrap')[0].id;
$('#dialog').dialog('open');
alert('Deleting '+pdfID+'');
$(this).closest('.imagewrap')
.fadeTo(300,0,function(){
$(this)
.animate({width:0},200,function(){
$(this)
.remove();
});
});
});
});
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<h1>PDF Files</h1>
<br><br>
<div class="imagewrap" id="pdf1">
<a href="something.pdf">
<img width="100" height="100" border="0">
<iframe src="something.pdf" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe></img>
</a> <i class=" icon-remove-sign" ></i>
</div>
You can set attribute scrolling= 'no' in your iframe.
<iframe src="..." style="overflow:hidden" scrolling="no" />
Here is a fiddle
UPDATE
Here is a fiddle with a valid pdf link. It looks ok on my browser (ff, chrome)
Please try this code
<iframe src="your site url" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Add demo link
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Use the above to remove scrollbars from iframes on chrome
I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});