RanchiMall/flo-greeting-cards
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Image downloading option added, pdf view improved

Browse Source
This commit is contained in:
Abhishek Sinha 2018-08-02 22:20:24 +05:30
parent 31f80ee028
commit db92cb5f6a
4 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/css/main.css
View File

@ -42,3 +42,13 @@ img {
padding: 5px 10px;
}
.pdfcontent, .pdfcontent > div {
width: 1124px;
height: 1590px;
border: none;
background-color: #c6c6c6;
}
.border_stashed {
border-style: dotted;
}

16
public/js/bundle.js
View File

@ -27381,11 +27381,11 @@ $(document).on('click', '#bc-btn', function() {
var _to = $('#_to').val();
var _cardid = $('#_cardid').val();
var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
// if (!atLeastOneIsChecked) {
// alert('Please specify download option: Image and/or PDF');
// return false;
// }
var atLeastOneIsChecked = $('input[name="chk"]').is(":checked");
if (!atLeastOneIsChecked) {
alert('Please specify download option: Image and/or PDF');
return false;
}
$.ajax({
type: 'post',
@ -27414,12 +27414,14 @@ $(document).on('click', '#bc-btn', function() {
QRCode.toCanvas(canvas, urlstring, opts, function (error) {
if (error) console.error(error)
console.log('Qr generated! for : '.urlstring);
// canvas in QRCode.toCanvas()is different to canvas below
html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) {
if (download_pdf==true) {
let namepdf = "flo-greetings-"+new Date().getTime()+".pdf";
var img = canvas.toDataURL("image/png");
var img = canvas.toDataURL("image/png");
var doc = new jsPDF('p', 'mm', 'a3');
doc.addImage(img, 'PNG', 1, 2);
doc.addImage(img, 'PNG', 0, 0);
//doc.addImage(img, 'PNG', 1, 2);
doc.save(namepdf);
doc.autoPrint();
}

16
public/js/main.js
View File

@ -45,11 +45,11 @@ $(document).on('click', '#bc-btn', function() {
var _to = $('#_to').val();
var _cardid = $('#_cardid').val();
var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
// if (!atLeastOneIsChecked) {
// alert('Please specify download option: Image and/or PDF');
// return false;
// }
var atLeastOneIsChecked = $('input[name="chk"]').is(":checked");
if (!atLeastOneIsChecked) {
alert('Please specify download option: Image and/or PDF');
return false;
}
$.ajax({
type: 'post',
@ -78,12 +78,14 @@ $(document).on('click', '#bc-btn', function() {
QRCode.toCanvas(canvas, urlstring, opts, function (error) {
if (error) console.error(error)
console.log('Qr generated! for : '.urlstring);
// canvas in QRCode.toCanvas()is different to canvas below
html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) {
if (download_pdf==true) {
let namepdf = "flo-greetings-"+new Date().getTime()+".pdf";
var img = canvas.toDataURL("image/png");
var img = canvas.toDataURL("image/png");
var doc = new jsPDF('p', 'mm', 'a3');
doc.addImage(img, 'PNG', 1, 2);
doc.addImage(img, 'PNG', 0, 0);
//doc.addImage(img, 'PNG', 1, 2);
doc.save(namepdf);
doc.autoPrint();
}

44
views/write.ejs
View File

@ -42,28 +42,30 @@
<button type="submit" class="btn btn-primary" id="bc-btn">Submit</button>
</div>
<div id="pdfcontent" class="pdfcontent">
<div class="border_stashed">
<div class="card mb-3 text-center">
<div class="card-body">
<h5 class="card-title">Dear <span id="span_to">Alice</span></h5>
</div>
<div class="text-center">
<img src="/images/<%=data.card_id%>.jpg" alt="Card image cap" id="pdf-img">
</div>
<div class="card-body">
<p class="card-text"><span id="span_user_msg" class="span_user_msg"><i>Your special message will appear here.</i></span></p>
<p class="card-text"><small class="text-muted">From <span id="span_from">Bob</span></small></p>
<p class="card-text">
<canvas id="canvas"></canvas>
</p>
<p class="card-text">
<img src="/images/rm.png" alt="Ranchi Mall logo" width="50" height="50">
<img src="/images/FLO_teal.png" alt="FLO logo" width="50" height="50">
<p><small class="text-muted">--- A Ranchi Mall FLO Blockchian Product ---</small></p>
</p>
<div id="pdfcontent" height="1000" width="1000" class="pdfcontent">
<div class="card mb-3 text-center">
<div class="card-body">
<h5 class="card-title">Dear <span id="span_to">Alice</span></h5>
</div>
<div class="text-center">
<img src="/images/<%=data.card_id%>.jpg" alt="Card image cap" id="pdf-img">
</div>
<div class="card-body">
<p class="card-text"><span id="span_user_msg" class="span_user_msg"><i>Your special message will appear here.</i></span></p>
<p class="card-text"><small class="text-muted">From <span id="span_from">Bob</span></small></p>
<p class="card-text">
<canvas id="canvas"></canvas>
</p>
<p class="card-text">
<img src="/images/rm.png" alt="Ranchi Mall logo" width="50" height="50">
<img src="/images/FLO_teal.png" alt="FLO logo" width="50" height="50">
<p><small class="text-muted">--- A Ranchi Mall FLO Blockchian Product ---</small></p>
</p>
</div>
</div>
</div>