search

BarisCanYesil / capacitor-plugin-printer

Capacitor plugin for printing HTML format value iOS/Android apps.
12 stars 4 forks source link

CSS Not Applied During Printing on iOS #4

Closed harshnavadiya closed 3 months ago

harshnavadiya commented 5 months ago

I'm experiencing an issue where CSS styles are not being applied when attempting to print a web page on iOS devices. This problem occurs specifically when using your plugin.

Steps to Reproduce:

Implement the plugin on a web page. Apply some CSS styles (e.g., font size, color, margins). Open the page on an iOS device (iPhone or iPad). Attempt to print the page using the iOS print feature. Notice that the CSS styles are not applied in the print preview or in the actual printout.

Environment:

Plugin version: "^0.0.3" iOS version: "14.2" Browser:125.0.6422.113 IMG_5411

BarisCanYesil commented 5 months ago

First of all hello, are you sure you are using inline CSS? (e.g. : <li style="font-size:50px">Coffee</li>) If you can share the code of the function you are using for print, I can help you more.

harshnavadiya commented 5 months ago

This is my HTMl code "<div class="green-card" [ngClass]="{'pt-10': modIos}">

{{qr_code_print}}

{{print}}

" This is mt ts code of Print function " printQR() { const printSection: any = document.getElementById('print-section'); const images = printSection.getElementsByTagName('img'); for (let img of images) { img.style.width = '200px'; } if (printSection) { const printContents = printSection.innerHTML; if (printContents) { if (!this.platform.is("hybrid")) { // For web printing window.print(); } else { // window.print(); // For mobile printing using Capacitor plugin Printer.print({ content: printContents, // Pass the HTML content here name: 'QR Codes', orientation: 'portrait', }).then(() => { console.log('Printing success'); }).catch((error) => { console.error('Printing error', error); }); } } else { console.error('No content to print'); } } else { console.error('Print section not found'); } }" this is CSS code ".green-card { background-color: var(--background-color); color: var(--ion-text-color); text-align: center; overflow: hidden; margin: 0; border-radius: 0 0 15px 15px; // box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); } .pt-10 { padding-top: 30px; padding-bottom: 5px; } .notification { display: flex; justify-content: space-between; align-items: center; h4 { color: white; margin: auto; padding: 10px; } } .white-card-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-left: 27px; } .white-card { display: flex; flex-direction: column; background-color: #fff; color: black; justify-content: center; align-items: center; border-radius: 20px; height: 150px; width: 60%; padding: 20px; margin: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); } .box { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; cursor: pointer; h2 { margin: 0; font-size: 20px; color: black; } p { margin: 5px; font-size: 18px; } } .transaction-history { display: flex; flex-direction: column; align-items: center; } .transaction-header { display: flex; justify-content: space-between; align-items: center; background-color: var(--background-color); color: #fff; font-weight: bold; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .transaction-content ul { list-style: none; padding: 5px; margin: 0px; } .transaction-content li { display: flex; flex-direction: column; margin-top: 10px; color: black } .transaction-card { background-color: #fff; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); margin-bottom: 4px; width: 85%; } ion-modal { --height: 300px; --width: 80%; --border-radius: 16px; --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } ion-header { background-color: var(--background-color); } ion-content { --overflow: auto; } ion-item { --margin: 0; --padding: 0; } .container { padding: 20px; border-radius: 5px; overflow-y: auto; height: 100%; } .form-group { font-size: 14.5px; .btn-div { margin: 0; } } .form-group label { display: block; font-weight: bold; } .form-group input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .form-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .form-group input[type="submit"] { background-color: #007BFF; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } ion-segment { border-radius: 0px; ion-label { color: var(--ion-text-color); } } .button1 { margin: 10px !important; padding: 0px !important; } .qr-container { display: flex; flex-wrap: wrap; justify-content: space-between; overflow-y: auto; height: calc(100vh - 55px - 60px); padding-top: 55px; box-sizing: border-box; } .qr-item { width: 48%; margin-bottom: 10px; } @media (max-width: 768px) { .qr-item { width: 100%; } } .qrcode{ width: 100px !important; } "
BarisCanYesil commented 5 months ago

The plugin only supports inline CSS, unfortunately. You are trying to apply styles through a .css file, not inline.

harshnavadiya commented 5 months ago

I have already applied inline CSS, but it's not working in iOS. Please help me solve this issue.