I've been looking into converting an HTML page into a PDF on the client side. I found a method with Javascript using html2canvas to parse the DOM and calculate the styles applied, and jsPDF to create the PDF. Link to my page - http://www.choosenj.com/html-to-pdf/
I'm struggling with a couple issues I need resolved:
The Canvased image is rendering the whole page as a single PDF, is there a way to split the long image into a multi page PDF?
Currently panels load as you scroll down, is there a way to load the entire page when clicking the "Create PDF button"?
If I wanted to canvas only panels that had a checkbox selected, how would I edit my JS?
Here my code below (Note: Most include html2canvas and jsPDF javascript libraries):
// Html to PDF
$(window).load(function(){
var
form = $('#Content'),
cache_width = form.width(),
a4 =[ 850, 2000]; // for a4 size paper width and height
$('#create_pdf').on('click',function(){
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF(){
getCanvas().then(function(canvas){
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit:'px',
format:'a4'
});
doc.addImage(img, 'JPEG', 0, 0, 180, 630);
doc.save('choosenj.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas(){
form.width(cache_width).css('max-width','none');
return html2canvas(form,{
imageTimeout:2000,
removeContainer:true
});
}
}());
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .Main Content -->
<div class="sections_group">
<div class="entry-content" itemprop="mainContentOfPage">
<div style="margin: 10px 0;"><a id="create_pdf" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-green" style="margin:0 20px;cursor:pointer;color:#fff;font-family: 'FranklinGothicStd-ExtraCond', Arial, sans-serif !important;text-transform: uppercase !important;">Create PDF</a> </div>
<?php
while ( have_posts() ){
the_post(); // Post Loop
}
?>
</div>
<!-- Contact Section-->
<?php wp_reset_postdata(); ?>
<?php get_template_part('contact-us') ?>
</div>
</div>
</div>
Any insight would be greatly appreciated,
Chris G
Related
I have one code for downloading particular division using javascript. But my problem is in that div contain one image tag .my image src is a URL which is outside my domain.My download function is given below:
function download() {
var options = {
};
var pdf = new jsPDF('p', 'pt', [748, 600]);
pdf.addHTML($("#invoice-POS"), 20, 20, options, function () {
pdf.save("Receipt_" + $scope.ReceiptName + ".pdf");
location.reload();
});
}
My div is
<div id="invoice-POS">
<center id="top">
<div class="info">
<img id="my-image" ng-src="{{Logo}}" alt=""
style="height:150px;width:150px"><br />
<h2 style="color:black" >Invoice</h2>
<img ng-src="{{QrImg}}" alt="" style="height:150px;width:150px" />
<h5>Scan QR Code </h5>
</div>
</center>
</div>
in this div ng-src="{{Logo}} is an external url ,qrImg is genertaed from my domain so qrimg is diplayed.Logo Image displayes in div ,but after downloading the div, Logo image is not showing,Qrimage is showing .Please help me..
I want to create a scroll horizontal for my product page, I have done it in the past, so i have an idea on how to proceed, but this time I want the image clicked to be a bigger size for example 600x600 while all the other images on the bottom of that one with the size 100x100. Have an arrow left right on the side of the big image, and if the arrow is pressed left/right swap that big picture with the previous/next one from the ones in the small size 100x100. Those images are set using php as they are in the server, this is the part that im finding hard aswell I dont know how I would use javascript to alter the images from the php file.
PHP code to get the images
$imgSet = "<img src='../ProductImages/$pID.jpg' class='image' onclick='openNav()'>";
$imgZoom = "<img src='../ProductImages/$pID.jpg' width='600px' height='600px'>";
$pInfo = "nothing for now";
$pDetails = $row['PROD_DETAILS'];
$sql = ("SELECT * FROM CHILD_IMG WHERE PROD_ID = '$pID';");
$getQuery = $connection->query($sql);
while($row = $getQuery->fetch_array()){
$childID = $row['ID'];
$parentID = $row['PROD_ID'];
$childName = $parentID . "_".$childID.".jpg";
$childImg .= "<img src='../ProductImages
/ChildImages/$childName' class='imgBotSize' onclick='openNav()'>";
Child images all the ones on the bottom of the big image
}
Javascript
function openNav() {
document.getElementById("flow").style.height = "100%";
}
function closeNav() {
document.getElementById("flow").style.height = "0%";
}
HTML
<div id="flow" class="overlayImgContainer">
<a class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-img-content">
<a><?php echo $imgZoom;?></a>
<div class="imgSlideGroup">
<a><?php echo $childImg;?></a>
</div>
</div>
<div class="arrowBtn" style="right: 40px">
<img src="../arrow-right-white.png" width="70px" height="120px">
</div>
<div class="arrowBtn" style="left: 40px">
<img src="../arrow-left-white.png" width="70px" height="120px">
</div>
</div>
If you have HTML like below
<div class="leftArrow"></div>
<div>
<img src="../smaller.jpg" class="selectedImage">
</div>
<div class="rightArrow"></div>
And in JS you can select the clicked image and reset the url to bigger image and change the style of the image as below.
var selectedImage = document.querySelector('.selectedImage');
selectedImage.onclick = function(){
selectedImage.src = '../bigger/jpg';
selectedImage.style.height = '400px';
selectedImage.style.width = '300px';
}
Hope this sample code will give some hint
I have <img id="barcode"> and I need to download image from src. The image is generated with base64, and src contain this string:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAACOCAYAAABg4BtLAAADgUlEQVR4Xu2czyt8URjGnyErWfgLWClLCUuxsmCDoijJwpo0GT+S/EhSFmyUErGQ2LBQFrJEmrKxmuIvsLRAo3vM+M5M3c6drnO/hs8s77n3zPu+zznP8z4zZyaWTqfT+gOvGIn+MpRB9JcBKhAF0RKtAEu3RIHzDTsworFYLG+SbEOVvV7YYP2v636ZkmhhZUA0s6RZugXmyPXeZY8GtWnsUfbop+5GTVLsUfZowRqAjCAjyMgpG8O6sC6s+1kBPmHIrATXdsxvfsgIMoKMIKO8NQAZOTYBsC6sC+vCurBubgVcyw6sC+vCurAurAvr5lTgu2QHeUFekBfkBXlBXpCXfxUoVl/RUXQUHUVH0VF0FB1FR78qwBkGn9aI370UFoZjrI6/waap9ykw7gX3gnvBveBecC+4F9wL7sWvI8pex73gXjIV4OcgmUIUa6++637cC+4F94J7wb3gXnAvuBfcC+4l25LSGdEZ0RnRGdEZ0RnRGdEZ0RnRGfmsAY7fcPymRP9FzsZqP3088LdpPz0RW3wkaqtQqY2DaKkhZosXRG0VKnb88fFRy8vLOj4+1uvrqzo6OjQ5OamGhgYVdl3Fzh3k/kgQfXh40PDwsK6vr/Niqqmp0e7urlpbW4PEGuoe54m+vLxobGxM5+fnWlxcVE9Pj8rKynR0dKSZmRk1Nzdra2tL1dXVoRKxPew80fv7e/X29hpE4/G4ysvLTUzv7+9aXV3VxsaGTk9P1djYaIs11LjzRA8PDw2iucm8vb3p8vJS09PTur291f7+vgYGBkIlYnvYeaLr6+tmH3oJ19XVKZlMam5uTmdnZ1+xeSSVSCRssYYad57owsKCLi4utLS0pO3tbe3t7amqqsos55GREbNP29vbNTs7GyoR28POE/UQHR8f/4qjs7NT8/PzRlZSqZT6+/sNQZU8ogcHBxocHFRTU5PRUQ89j3W9193dnbq6uuQVo6+vzwZKqHHniGaTmZiYMKSUe0LMS3Btbe13sO7z87NGR0d1c3Nj5KS7u9sgc3JyYuSmra1Nm5ubqqysDIWY7WHniHoBXF1daWhoSE9PT3nxtLS0aGdnR/X19bY4Q49Hkqh3EtSTlZWVFdMhVVRUGAKamppSbW1t6CSCTBBJokECcX0PibqucNTzg2jUFXf9fiDqusJRzw+iUVfc9fuBqOsKRz3/n0H0A2kqGPz1ouCnAAAAAElFTkSuQmCC
How to download this image with jquery?
I m trying to do this:
$('#save_but').click(function() {
var img = document.getElementById('barcode');
img.src =$('#barcode').attr('src');
window.location.href = img.src.replace('image/png', 'image/octet-stream');
});
File is downloading but I cannot assign name and format (example: img.png) to it.
you can use the download attribute on an a tag ...
<img src="data:image/jpeg;base64,/9j/4AAQSkZ..."/>
see more: https://developer.mozilla.org/en/HTML/element/a#attr-download
Ok, that's solution for my problem:
1) Download this 5kb plugin: download.js
2) Write
<script>
$('#save_but').click(function() {
download($('#barcode').attr('src'),"strcode.png","image/png");
});
</script>
Working in Chrome, FireFox, IE ver. 9+
HTML File:
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;">
<strong>Codepedia.info</strong><hr />
<h3 style="color: #3e4b51;">
Html to canvas, and canvas to proper image
</h3>
<p style="color: #3e4b51;">
<b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net,C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs, Web Design, Software
</p>
<p style="color: #3e4b51;">
<b>html2canvas</b> script allows you to take "screenshots" of webpages or parts of it, directly on the user's browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation.
</p>
</div>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br />
<div id="previewImage" style="display: none;">
</div>
Inside the Script tag:
<script>
$(document).ready(function () {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
I've looked around a bit, and found issues similar to mine, but not quite the same. I have a page template that is laid out in 4 columns in HTML. Inside column 4, I have a php function echoing a gallery of images.
<div id="homepage-layout">
<div id="homepage-column-1">
<div class="homepage-small"><?php echo get_homepage_img_small_1(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_2(); ?></div>
<div class="homepage-small"><?php echo get_homepage_img_small_3(); ?></div>
</div><!-- End Column 1 -->
<div id="homepage-column-2">
<div class="homepage-large-left"><?php putRevSlider("homepage"); ?></div>
</div><!-- End Column 2 -->
<div id="homepage-column-3">
<div class="homepage-med"><?php echo get_homepage_img_med_1(); ?></div>
<div class="homepage-med"><?php echo get_homepage_img_med_2(); ?></div>
</div>
<div id="homepage-column-4">
<div class="homepage-large-right"><?php putRevSlider("home_small"); ?></div>
</div><!-- End Column 4 -->
</div>
I'm using jQuery to change the layout of the site based on the width of the window.
var column3 = $("#homepage-column-3").contents();
var column4 = $("#homepage-column-4").contents();
var swapped = false;
$(window).on('resize', function() {
if( $(window).width() <= 700 && !swapped){
$("#homepage-column-3").html(column4);
$("#homepage-column-4").html(column3);
swapped = true;
} else if( $(window).width() > 700) {
$("#homepage-column-3").html(column3);
$("#homepage-column-4").html(column4);
swapped = false;
}
});
However, when the window size triggers the jQuery, the RevSlider from Column 4 freezes on the image it was displaying at the time, and the only way to get it running again is to refresh the page.
Any thoughts? Or, if this question has been answered already, please point me in the right direction.
Thanks!
jeroen had the right idea. I was able to take the 4 columns, and split them into 2 chunks. I was then able to make them both flex containers, and with a of media query, was able to make the columns swap places while keeping the RevSlider initialized.
Thanks to all for your help!
The home page of my site has a container that holds square boxed with an image and a title. I changed some of those tiles to .gif images so once you hover over the image changes to another. There is not title anymore. The issue is when I load the page, the pictures that are gif do not load unless I hover over them. Once I hover over all, and do a page resize they all look fine.
Could it be because of the page resize function?
http://geranbaha.com/indextest.html
Can someone point out what I am doing wrong.
<script language="JavaScript">
<!-- Hide the script from old browsers -->
img0_on = new Image(311,235);
img0_on.src="upload/ketabmoghadas.gif";
img0_off = new Image(311,235);
img0_off.src="upload/ketabmogadasWeb.gif";
img1_on = new Image(311,235);
img1_on.src="upload/divine.gif";
img1_off = new Image(311,235);
img1_off.src="upload/divineculture.gif";
img2_on = new Image(311,235);
img2_on.src="upload/tv.gif";
img2_off = new Image(311,235);
img2_off.src="upload/rozaneh.gif";
img3_on = new Image(311,235);
img3_on.src="upload/radio.gif";
img3_off = new Image(311,235);
img3_off.src="upload/radio1.gif";
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + "_off.src");
}
//<! --End Hiding Here -->
html section
the commented part in this section is what it used to be and I replaced it with one line html code to show the gif images.
<div class="project-post web-design illustration">
<img src="ketabmogadasWeb.gif" border="0" name="img0">
<!-- <img alt="" src="upload/divineculture.jpg">
<div class="hover-box">
<div class="project-title">
<h2>فرهنگ الهی</h2>
<span>www.divine-culture.com</span>
<div><i class="fa fa-arrow-right"></i></div>
</div>
</div> -->
</div>
Put all of your javascript in
$( document ).ready(function() {
// Put all your image stuff here
});
And remove onmouseover="over_image('img0');" onmouseout="off_image('img0')"
Those onmouseover functions is what makes it change on a hover.