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>
</>
}
export default Relatorio;
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.
Hello, this could be a printer driver issue try to see if you have the latest from the manufacturer and not windows generic update the pdf and google possible issues font sizes alone can have this effect. Good luck
note: this code should have parenthese after the return.
To sum it up this code has thrown errors on codepen and py tutuor. SyntaxError: Unexpected token < was it your intention to put a div inside a div here?
Thank you, i’ll try to find a new driver for the printer. I was wondering about errors in the code and not thinking about a possible error in the hardware or the OS.
About the elements, they are displaying correctly, i just reduced the amount of tags to fit better in the post. but you can see the full component below:
Do i need to use node to use the printer or i really can do it all from the front-end?
Im trying to avoide using the node cause i dont want to especify the printer’s model (something required in most of the libraries that i found).