javascripthtmljsonhtml5-canvaslocal-storage
Showing data from a string on the localStorage and show it in a pop up out of the app
I have been dealing with this particular situation. I have a form in which the user can put some data and save it. He can do that several times creating a record of similar items. The app creates a string with this data and saves it in the localStorage. The user is able to retrieve the data on a page created with an accordion system where he can see it separately just as he typed before. Now I need to get some data from the LocalStorage to show it in a page which is out of the DOM of the app.
This is the js controller code where I want to show the data:
define(["app",
"js/clientModel",
"js/preViewer/preViewerView"],
function(app, Client, preView) {
var client = null;
var payment = null;
//var $ = Dom7;
var state = {
isNew: false
};
var bindings = [];
function init(query){
//console.log(query.idP);
var clients = JSON.parse(localStorage.getItem("f7Clients"));
if (query && query.id) {
client = new Client(_.find(clients, { id: query.id }));
//console.log(client);
if (query && query.idP) {
payment = _.find(client.payments, { id: query.idP });
//console.log(payment);
}
}
/*find the client by ci and load its data into client var
var tempClientId = sessionStorage.getItem('tempClientId');
var client;
async function loadClientJsonToObject(id){
let clients = JSON.parse(localStorage.getItem('f7Clients'));
await clients.forEach((p)=>{
if(p.id === id){
client = p;
}
});
return newClients;
}*/
preView.render({
model: client,
payment: payment,
bindings: bindings,
state: state,
apps: client.getFullAppointments2(),
});
console.log('preViewerController init() fnc done...');
}
function closePage() {
if (!state.isNew) {
app.router.load('client', {id: client.id});
}
else {
app.mainView.loadPage('client.html?id=' + client.id, false);
}
app.f7.closeModal();
}
return {
init: init
};
});
And this is how my localStorage looks like:
[{
"id": "d71b8519-3e89-4056-fd1a-8f1e0240cfe4", "hasPic": false, "picId": 2, "picSrc": "", "picFile": [], "createdOn": "2022-01-08T02:38:12.960Z", "firstName": "Fulano Menganejo Ciclanejo", "company": "La Fábrica", "mobile": "+53555555", "phone": "+5372222222", "email": "fulano@nauta.cu", "address": "La calle #100 e/ La Otra y Aquella, El Pueblo, La Ciudad, La Provincia, El País", "nit": "345748368353", "job": "Barrendero", "lapse": "", "gender": "M", "whatsapp": "https://www.dagikeqeqomy.me.uk", "telegram": "https://www.dagikeqeqomy.me.uk",
"payments": [ {
"id": "1", "ldate": "18/11/-1982 12:00 am", "lapse": "Octubre", "di": "42000", "myp": "910", "pcincome": "1", "pcbr": "Dolorem cupidatat ab", "pcvs": "3", "pcvsbr": "Est eiusmod asperior", "wf": "82", "wfbr": "Ut iusto magni sunt ", "ss": "69", "ssbr": "Nihil laboris assume", "pi": "69", "pibr": "Autem eiusmod aut ab", "fee": "1", "feebr": "In aut duis doloribu", "lp": "4", "lpbr": "Culpa consequatur d", "fp": "61", "fpbr": "Officia ea ullam eli", "pss": "43", "pssbr": "Odio harum voluptas ", "ass": "55", "assbr": "Non ut ad exercitati", "pitcp": "99", "pitcpbr": "Magni obcaecati culp", "doc": "71", "docbr": "Officiis est sint e", "pia": "73", "piabr": "Officia in iusto ver", "pv": "29", "pvbr": "Sint quas explicabo", "car": "31", "carbr": "Eum velit reprehend", "ship": "69", "shipbr": "Tenetur aliqua Volu", "total": "760"
},{
"id": "2", "ldate": "27/06/-1982 12:00 am", "lapse": "Mayo", "di": "58000", "myp": "560", "pcincome": "919", "pcbr": "Et et reiciendis ita", "pcvs": "65", "pcvsbr": "Beatae sunt dolorem ", "wf": "95", "wfbr": "Fugiat pariatur Eli", "ss": "30", "ssbr": "Ea totam cupidatat m", "pi": "21", "pibr": "Voluptates enim eius", "fee": "63", "feebr": "Consequat Pariatur", "lp": "24", "lpbr": "Eos et nobis possim", "fp": "36", "fpbr": "Illum dolor deserun", "pss": "75", "pssbr": "Debitis sunt quia po", "ass": "46", "assbr": "Fugiat magni et et p", "pitcp": "39", "pitcpbr": "Sint totam a minus c", "doc": "90", "docbr": "Enim tenetur Nam und", "pia": "82", "piabr": "Obcaecati laborum I", "pv": "28", "pvbr": "Tenetur in cupiditat", "car": "78", "carbr": "Sit dolores ipsam ve", "ship": "46", "shipbr": "Voluptatum qui aut d", "total": "1737"
}]
}]
And this is the page where I need to show the data. The specific items to show are mobile and email:
This is my html code:
<div class="popup">
<div class="view view-popup navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">VISTA PREVIA</div>
<div class="right"></div>
</div>
</div>
<div class="page client-page">
<div class="page-content">
<div class="content-block">
<div class="list-block">
<a onclick="getpng()" aria-label="Guardar"><div onclick="history.go(-1);" class="float-buttonr"><i class="btn icon simbicon-download" aria-hidden="true"></i></div></a>
<a class="link close-popup" aria-label="Cancelar"><div class="float-buttonl"><i class="btn icon simbicon-close-b" aria-hidden="true"></i></div></a>
<div class="content-block report"><br/>
<div class="content-block-title">Comprobante de pago de la <i class="icon simbicon-onat" aria-hidden="true"></i></div>
<div class="item-title payment-title-range">CLIENTE:<div class="payment"> {{model.firstName}}</div></div>
<div class="item-title payment-title-range">NIT:<div class="payment"> {{model.nit}}</div></div><br/>
<div class="item-title payment-title">Fecha:<div class="payment"> {{payment.ldate}} </div>
<div class="item-title payment-title-range">Periodo:<div class="payment"> {{payment.lapse}}</div></div></div><br/>
<div class="item-title payment-title payment-title-last">Ingreso declarado:<div class="payment"> ${{payment.di}} CUP</div></div><br/>
<br/>
{{#if payment.pcvs}}
<div class="item-title payment-title">0114022 ventas y servicios:<div class="payment"> ${{payment.pcvs}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pcvsbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.rent}}
<div class="item-title payment-title">0200822 Arrendamiento:<div class="payment"> ${{payment.rent}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.rentbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.ps}}
<div class="item-title payment-title">02001022 Servicios públicos:<div class="payment"> ${{payment.ps}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.psbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pitcp}}
<div class="item-title payment-title">0510122 ingresos personales (TCP):<div class="payment"> ${{payment.pitcp}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pitcpbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.sr}}
<div class="item-title payment-title">0510522 Regimén simplificado (PN):<div class="payment"> ${{payment.sr}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.srbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pipp}}
<div class="item-title payment-title">0520322 Ingresos per. (ret. y PP):<div class="payment"> ${{payment.pipp}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pippbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pirtcp}}
<div class="item-title payment-title">0520522 Ingresos per. (ret. TCP):<div class="payment"> ${{payment.pirtcp}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pirtcpbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pic}}
<div class="item-title payment-title">0530102 Ingresos per. (SC):<div class="payment"> ${{payment.pic}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.picbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pia}}
<div class="item-title payment-title">0530122 Ingresos per (agr.):<div class="payment"> ${{payment.pia}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.piabr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pi}}
<div class="item-title payment-title">0530222 Ingresos per. (liq. a.):<div class="payment"> ${{payment.pi}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pibr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pie}}
<div class="item-title payment-title">0530322 Ingresos pers. eve.:<div class="payment"> ${{payment.pie}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.piebr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.piec}}
<div class="item-title payment-title">0530422 Ingresos per. (CE):<div class="payment"> ${{payment.piec}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.piecbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.wf}}
<div class="item-title payment-title">0610322 Fuerza de trabajo:<div class="payment"> ${{payment.wf}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.wfbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.wr}}
<div class="item-title payment-title">0620102 Recursos forestales:<div class="payment"> ${{payment.wr}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.wrbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.bay}}
<div class="item-title payment-title">0620702 Uso y exp. de Bahías:<div class="payment"> ${{payment.bay}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.baybr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pv}}
<div class="item-title payment-title">0710122 Propiedad o vivienda:<div class="payment"> ${{payment.pv}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pvbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.ul}}
<div class="item-title payment-title">0710402 Tierras ociosas:<div class="payment"> ${{payment.ul}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.ulbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.ship}}
<div class="item-title payment-title">0710522 Embarcaciones:<div class="payment"> ${{payment.ship}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.shipbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.car}}
<div class="item-title payment-title">0710622 Transporte terrestre:<div class="payment"> ${{payment.car}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.carbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.he}}
<div class="item-title payment-title">0720122 Herencias:<div class="payment"> ${{payment.he}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.hebr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.doc}}
<div class="item-title payment-title">0730122 Impuestos sobre doc.:<div class="payment"> ${{payment.doc}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.docbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.ass}}
<div class="item-title payment-title">0810232 Seguridad soc. artes p.:<div class="payment"> ${{payment.ass}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.assbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.pss}}
<div class="item-title payment-title">0810432 Seguridad soc. usufruc.:<div class="payment"> ${{payment.pss}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.pssbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.ss}}
<div class="item-title payment-title">0820132 Seguridad social:<div class="payment"> ${{payment.ss}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.ssbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.sss}}
<div class="item-title payment-title">0820332 Seguridad social (mar.):<div class="payment"> ${{payment.sss}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.sssbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.sgn}}
<div class="item-title payment-title">0900122 Anuncios y propaganda:<div class="payment"> ${{payment.sgn}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.sgnbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.or}}
<div class="item-title payment-title">1010602 Otros derechos:<div class="payment"> ${{payment.or}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.orbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.bld}}
<div class="item-title payment-title">1020102 Licencia de const.:<div class="payment"> ${{payment.bld}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.bldbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.wood}}
<div class="item-title payment-title">1030102 Multa forestal:<div class="payment"> ${{payment.wood}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.woodbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.fee}}
<div class="item-title payment-title">1030122 Multas y contravenciones:<div class="payment"> ${{payment.fee}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.feebr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.hab}}
<div class="item-title payment-title">1030202 Multas medio ambiente:<div class="payment"> ${{payment.hab}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.habbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.lp}}
<div class="item-title payment-title">1060122 Recargo por mora:<div class="payment"> ${{payment.lp}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.lpbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.fp}}
<div class="item-title payment-title">1060522 Recargo por apremio:<div class="payment"> ${{payment.fp}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.fpbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.ld}}
<div class="item-title payment-title">1060922 Aplazamiento de deuda T:<div class="payment"> ${{payment.ld}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.ldbr}}</div></div><br/>
<br/>{{/if}}
{{#if payment.gft}}
<div class="item-title payment-title">1240102 Donaciones:<div class="payment"> ${{payment.gft}} CUP</div></div><br/>
<div class="item-title payment-title payment-title-last">Referencia bancaria:<div class="payment"> {{payment.gftbr}}</div></div><br/>
<br/>{{/if}}
<div class="item-title payment-title payment-title-last">Total pagado:<div class="payment"> ${{payment.total}} CUP</div></div><br/>
<br/>
<div class="item-title payment-title payment-title-last">Comisión de servicio:<div class="payment"> ${{payment.myp}} CUP</div></div><br/>
<br/>
<div class="item-title" style="text-align:center;margin-bottom:5px;"><i class="icon simbicon-arrowdown"></i> Ante cualquier duda o aclaración <i class="icon simbicon-arrowdown"></i></div>
<div class="item-content" style="border-bottom:1px solid #9f9f9f;border-top:1px solid #9f9f9f;">
<div class="item-media"><i class="icon simbicon-contact-s"></i></div>
<div class="item-inner" style="border:none;">
<div style="flex-direction:column;">
<div class="item-media"><i class="icon simbicon-mobile-s"></i><div class="payment">+53 54749683</div></div>
<div class="item-media"><i class="icon simbicon-sms-s"></i><div class="payment">yadian.palacio@nauta.cu</div></div>
</div>
</div>
</div>
<br/>
<div class="payment-title-last" style="display:flex;;flex-direction: row;"><img src="img/blank.svg"/>
<div style="margin-left:40px;"><br/><br/><br/>
<div class="payment" style="border-top:1px solid #9f9f9f;padding-top:5px;">Firma del Gestor</div><br/><br/><br/><br/>
<div class="payment" style="border-top:1px solid #9f9f9f;padding-top:5px;">Firma del Cliente</div>
</div>
</div>
<br/><br/>
</div>
</div>
</div> <!--content block-->
</div> <!--page content-->
</div> <!--page-->
</div> <!--view popup-->
</div> <!--popup-->
¿What do I need? To call the localStorage, get the values for email and mobile and show them at the end of the page (see image for reference). I think that will solve the problem but I failed on the try. ¿Any idea or suggestion?
Solution
I think the problem is in the object you call in html2canvas. I made a codesandbox where I use an accordion and capture the open element to render it on a canvas.
The steps are:
- Get the panel that is open
- Get the panel dimensions to resize the canvas and clean the canvas
- Paint on the canvas
- Download image
I leave below the most important function
function getScreenshot() {
if (child) {
const item = document.getElementById(child);
var canvas = document.getElementById("mycanvas");
canvas.width = item.clientWidth;
canvas.height = item.clientHeight;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
html2canvas(item).then((canvas) => {
ctx.drawImage(canvas, 0, 0);
//DOWNLOAD
var link = document.createElement("a");
link.download = "filename.png";
link.href = canvas.toDataURL();
link.click();
});
} else {
console.log("PLEASE, OPEN SECTION");
}
}
codesandbox (Open the codesandbox in a full tab so you can see that the files are downloaded)
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices