在 localStorage 上显示字符串中的数据，并在应用程序的弹出窗口中显示
Showing data from a string on the localStorage and show it in a pop up out of the app
我一直在处理这种特殊情况。我有一个表单，用户可以在其中放置一些数据并保存。他可以多次这样做，从而创建类似项目的记录。该应用程序使用此数据创建一个字符串并将其保存在 localStorage 中。用户能够在使用手风琴系统创建的页面上检索数据，他可以在其中单独查看数据，就像他之前输入的一样。现在我需要从 LocalStorage 获取一些数据，以便在应用 DOM 之外的页面中显示它。
这是我要显示数据的 js 控制器代码：
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
};
});
这就是我的 localStorage 的样子：
[{
"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"
}]
}]
这是我需要显示数据的页面。具体要显示的项目是手机和电子邮件：
这是我的html代码：
<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-->
¿我需要什么？
要调用 localStorage，请获取电子邮件和移动设备的值并将它们显示在页面末尾（参见图片以供参考）。我认为这会解决问题，但我尝试失败了。 ¿有什么想法或建议吗？
我认为问题出在您在 html2canvas 中调用的对象中。我制作了一个 codesandbox，我在其中使用手风琴并捕获打开的元素以将其呈现在 canvas.
上
步骤是：
- 获取打开的面板
- 获取面板尺寸以调整 canvas 的大小并清理 canvas
- 在 canvas
上绘画
- 下载图片
我把最重要的功能放在下面
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（在完整选项卡中打开 codesandbox，以便您可以看到文件已下载）
我一直在处理这种特殊情况。我有一个表单，用户可以在其中放置一些数据并保存。他可以多次这样做，从而创建类似项目的记录。该应用程序使用此数据创建一个字符串并将其保存在 localStorage 中。用户能够在使用手风琴系统创建的页面上检索数据，他可以在其中单独查看数据，就像他之前输入的一样。现在我需要从 LocalStorage 获取一些数据，以便在应用 DOM 之外的页面中显示它。
这是我要显示数据的 js 控制器代码：
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
};
});
这就是我的 localStorage 的样子：
[{
"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"
}]
}]
这是我需要显示数据的页面。具体要显示的项目是手机和电子邮件：
这是我的html代码：
<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-->
¿我需要什么？ 要调用 localStorage，请获取电子邮件和移动设备的值并将它们显示在页面末尾（参见图片以供参考）。我认为这会解决问题，但我尝试失败了。 ¿有什么想法或建议吗？
我认为问题出在您在 html2canvas 中调用的对象中。我制作了一个 codesandbox，我在其中使用手风琴并捕获打开的元素以将其呈现在 canvas.
步骤是：
- 获取打开的面板
- 获取面板尺寸以调整 canvas 的大小并清理 canvas
- 在 canvas 上绘画
- 下载图片
我把最重要的功能放在下面
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（在完整选项卡中打开 codesandbox，以便您可以看到文件已下载）