Acroform Field not rotating with document

mozilla / pdf.js

PDF Reader in JavaScript

https://mozilla.github.io/pdf.js/

Apache License 2.0

48.35k stars 9.97k forks source link

Acroform Field not rotating with document #9596

Closed pgodwin closed 2 years ago

pgodwin commented 6 years ago

Acrobat form fields are not rotated correctly on the page.

Attach (recommended) or Link to PDF file here: private-patient-hospital-claim.pdf

Configuration:

Web browser and its version: 65.0.3325.181 (Official Build) (64-bit)
Operating system and its version: Windows 2016
PDF.js version: pdfjs-1.10.88-dist
Is a browser extension: No

Steps to reproduce the problem:

Set renderInteractiveForms to true on the viewer
Open the attached PDF. The two Acrobat fields have the wrong rotation applied.

What is the expected behavior? (add screenshot) Adobe Reader 11:

What went wrong? (add screenshot) Text fields did not rotate with the page correctly:

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension): Default viewer from pdfjs-1.10.88-dist. Edit, tested on mozilla.github.io/pdf.js with the same issue

timvandermeij commented 6 years ago

This may be a duplicate of #7631.

bksantiago commented 4 years ago

Didn't have a luck fixing it on pdf.js side itself. So in the meantime, had a workaround to manually rotate the fields on load.

in the annotation_layer.js I've added the ff in TextWidgetAnnotationElement

element.setAttribute('data-rotation', this.page.rotate);

Then added this fix after the event textlayerrendered

const inputs = Array.from(document.getElementsByTagName('input'));

  for (const input of inputs) {
    const rotation = +input.getAttribute('data-rotation');

    if (rotation > 0 && input.offsetParent) {
      const oldWidth = input.offsetParent.clientWidth;
      const oldHeight = input.offsetParent.clientHeight;
      input.style.transform = `rotate(${-1 * rotation}deg)`;
      input.style.width = `${oldHeight}px`;
      input.style.height = `${oldWidth}px`;

      let to = 0;
      if (rotation === 90) {
        to = oldHeight / 2;
      } else if (rotation === 270) {
        to = oldWidth / 2;
      }
      input.style.transformOrigin = `${to}px ${to}px`
    }
  }