I'm developing the management part of a delivery system and i am trying to generate a and print in a thermal printer the customers asks. Most of the users will be restaurants, so i wish i could print it without those dialog boxes just when i click in a button to 'print' to avoid an exausting work when they have a lot of asks.
I can generate the pdf correctly, but it is not printing right. Thats what i've tryied:
function Relatorio(props){
useEffect(() => {
const element = document.getElementById('wrap-relatorio-pedido');
const opt = {
margin: 5,
filename: `pedido #${props.nbl_num_nota}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a6', orientation: 'portrait' }
};
//first attempt
// html2pdf().from(element).set(opt).outputPdf('arraybuffer').then((pdf) => {
// const blob = new Blob([pdf], { type: 'application/pdf' });
// const blobUrl = URL.createObjectURL(blob);
// const iframe = document.createElement('iframe');
// iframe.style.display = 'none';
// iframe.src = blobUrl;
// document.body.appendChild(iframe);
// iframe.onload = () => {
// iframe.contentWindow.print();
// document.body.removeChild(iframe);
// URL.revokeObjectURL(blobUrl);
// };
// });
//second attempt
// var req = new XMLHttpRequest();
// req.onload = function (event) {
// var blob = new Blob([req.response], {type: 'application/pdf'}); //this make the magic
// var blobURL = URL.createObjectURL(blob);
// const iframe = document.createElement('iframe'); //load content in an iframe to print later
// document.body.appendChild(iframe);
// iframe.style.display = 'none';
// iframe.src = blobURL;
// iframe.onload = function() {
// setTimeout(function() {
// iframe.focus();
// iframe.contentWindow.print();
// }, 1);
// };
// };
html2pdf().from(element).set(opt).save();
}, [props.nbl_num_nota]);
const space = ' '; // adiciona espaçamento em spans
const data = new Date(props.nbl_dat_emissao);
// Formatar a data no formato dd/mm/yyyy
const dataFormatada = `${('0' + data.getDate()).slice(-2)}/${('0' + (data.getMonth() + 1)).slice(-2)}/${data.getFullYear()}`;
// Formatar a hora no formato hh:mm
const horaFormatada = `${('0' + data.getHours()).slice(-2)}:${('0' + data.getMinutes()).slice(-2)}`;
return <>
<div className='d-flex justify-content-between pedido ps-2 pt-3 pb-1' id='body-relatorio-pedido'>
<div className='row pt-4' id='wrap-relatorio-pedido'>
//content
</div>
</div>
</>
}
I don't know if it is possible due to the browser security and i have alredy tryied to the other similar question's solutions... so if anyone know how to do it or can answer if it is possible or not would help a lot.
Top comments (0)