Printing from PDF.js to Dot Matrix Printer - html

i'm trying to print an invoice from an ASP.NET application to an Epson LX 300+. The problem i have is that i cannot use traditional ReportViewer because printing icon only works on Internet Explorer, the users use Mozilla and Chrome.
We tried to render a HTML page for the invoice and print, but horizontally is reduced around a 50%.
So we are trying create a ReporViewer and export it to a PDF, then open it using PDF.js... the result is the same horizontally 50% less.
The page size is Statement. I'm attaching 2 images printed from the PDF.js
I've noticed if we vary the resolution of the printer, it's 90% horizontally, but also changes the vertically.
Your help would be really appreciated. Regads. Also We tried on Chrome but its really fuzzy.
Printed from PDFjs on Mozilla 120x72dpi
Printed form PDFjs on Mozilla 120x144dpi

Related

Print layout works in Firefox but not in Chrome

I have a webpage that prints out tickets. I need the layout to correctly fill the paper. Im currently using this solution offered by LittleGnome. It works fine in Firefox, but in Chrome and IE the layout is messed up. The scale is too big and the content is spread over 4 pieces of paper instead of one.
When i used chromes dev tools to debug the print layout, it seemed like chrome cannot handle the flex containers correctly. All the elements on the layout have a size of 8000X4000 pixels, which is totally wrong. What might be causing this and how to fix this?
JsFiddle for the current version

Any way to display PDF in browser full screen

When displaying a PDF with standard (US letter) size pages, the PDF appears to be 'zoomed out' in Chrome. In Firefox, the PDF shows at a better zoom level.
Here is an example:
http://www.pdf995.com/samples/pdf.pdf
When viewed in Chrome on a 4k monitor, it is zoomed out so far that you can see 1.5 pages. While in Firefox you can see roughly half of the first page which in our case is much more desirable.
Is there any way that we can display this PDF at a standard zoom. For example, setting some headers, etc.
I'm currently using PHP to display the PDF, by setting the following headers and then echoing out the file.
Content-type: application/pdf
Content-Disposition: inline; filename=filename.pdf
Any ideas or suggestions would be great!!
From the description above
Chrome was and still does generally use "standard" 100% zoom.
Whilst FireFox was using Fit Width ("roughly half of the first page").
Many pdf extenders but not all will use the Adobe Acrobat URL trailing fragment so for the example in question try
http://www.pdf995.com/samples/pdf.pdf#zoom=200
however that can be fickle and require a second refresh of same URL.
Better (for more consistency) with the questions description of Firefox at the time use.
http://www.pdf995.com/samples/pdf.pdf#view=FitH
Which for me, with my current window in Chromium Brave / Edge will be 136% on this occasion, but some other 100%hv on a different window setting or screen.
Note the above can be over-ridden as much HTML can by the clients setting so assuming they allow a PDF to run with its own control, it works but if they pre-set remember last PDF view setting it may not.

Photos show up in landscape orientation on a webpage, vertically elsewhere. Why?

I have some photos that were uploaded by a user who complained that the vertical photos were changed to landscape orientation when they were resized. Indeed, that was the case and in an effort to just move things along I reoriented the photos and uploaded in place. That had no effect when the pictures were viewed inside of a webpage though!
To make as simple a test as possible I created a bare bones web page with no CSS and a single IMG element with no attributes other than src. That continues to show the photo in landscape mode. Copy the photo's URL and paste into another tab and the photo shows in vertical mode. Download the file and open in Windows and it shows in vertical mode.
http://www.texashiking.com/test/PhotoOrientation.htm
The files are being stored on Azure BLOB storage.
I've duplicated this with Chrome version 56, Edge version 38 and Internet Explorer 11.
What could be causing this?
Your image has embedded exif orientation data which is presumably being ignored when rendering the page. See this answer for a bit more detail.
Basically, the camera you took the image with stored it in landscape, but stored some metadata with it saying that the image needs to be rotated 270°. The browser is apparently ignoring this tag when rendering it in the webpage, but not when you access the image directly.

Chrome inconsistent printing across devices

I am trying to print an HTML document of dynamic height to PDF. The document is made up of a variety of inputs and textareas, and I use flexbox for much of the layout. I've been doing some manual testing by filling up some of the inputs or textareas with text and then printing to PDF. The preview contained 22 pages on my laptop. I then tested the exact same file on a tablet and then on a desktop computer. The number of pages created was inconsistent, and sometimes off by a large number of pages. For example, my laptop printed 22 pages and the tablet 28. Why? How can I get consistent printing across devices? I would like to be able to have the exact same physical dimensions in the PDF for the exact same HTML content no matter what device or screen resolution or screen size I am printing from.

Why do my webpage images appear sideways in my HTML but correct when in full screen?

If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.