joseluisq / printd Goto Github PK

Expected Behavior

Print 2 or more pages well.

Actual Behavior

When you try to print several pages there are the next errors:

Background colors for elements such as div do not show up. Was able to reproduce this in the playground as well

Base on :

• Version: 1.4.0

here my code :

  mounted() {
    console.log("when component is mounted!");

    this.d = new Printd();
    const iframe = this.d.getIFrame();

    const { contentWindow } = iframe;
   
    contentWindow.addEventListener("beforeprint", () =>
      console.log("before print event!")
    );
    contentWindow.addEventListener("afterprint", () =>
      console.log("after print event!")
    );
  },

// Methods
  methods: {
    print() {
      this.d.print(this.$el, [this.cssText]);
    }
  }

Is it possible to pass headers to the printURL() method? I'm testing printd in a single page application and the endpoint is locked behind JWT authentication.

I could attach the token to the url.

https://endpoint/api/testing?token=JWT TOKEN

I feel a more elegant approach would be better.

Hi!, is there any way to disable headers and footers by default?

Expected Behavior

The plugin should create a <style> element if the element passed is not an url and a element if the element is a valid url.

Actual Behavior

When creating elements from urls the plugin alternatively creates a corrent element and an incorrect one.

For example:

const styles = [
  "https://.../css/chunk-019a112c.78b8d35d.css",
  "https://.../css/chunk-04aba45e.8c018d83.css"
]

results in

<link type="text/css" rel="stylesheet" href="https://.../css/chunk-019a112c.78b8d35d.css">
<style type="text/css">https://.../css/chunk-04aba45e.8c018d83.css</style>

Specifications

• Version: v1.3.0

Specifications

• Version: 1.51
• Browser version: 109.0.5414.87

Steps will reproduce the problem.

(1) Press 'print button'
(2) Cancel print modal

My code

  mounted() {
    // Printd
    this.d = new Printd()
  },
  methods: {
    print() {
      const callback = ({ launchPrint }) => {
        launchPrint()
      }

      this.d.print(document.getElementById('printing'), [], [], callback)

      // then add your event handlers
      const { contentWindow } = this.d.getIFrame()
      if (contentWindow) {
        contentWindow.addEventListener('beforeprint', () => {
          console.log('before print event!')
        })
        contentWindow.addEventListener('afterprint', () => {
          console.log('after print event!')
        })
      }
    },
  },

Hi, I'm trying to print a chart generated with chartjs but the chart doesn't appears in the print.

This what I'm doing

`const doc = new Printd()

const css = cssText: [`
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Segoe UI';
font-size: 14px;
}
.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
.table {
border: none;
border-right: solid 1px #C6E2FF;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 15px;
}
.table thead th {
background-color: #ECF5FF;
/border: none;/
border-right: solid 1px #C6E2FF;
color: #336B6B;
padding: 10px;
text-align: center;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.table tbody td {
border-bottom: solid 1px #C6E2FF;
color: #333;
padding: 5px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}]

const scripts = [
'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js',
(() => console.log('Hello from IFrame!'))()
]

doc.print(document.getElementById('printArea'), css, scripts)`

All the rest of the elements shows in the print dialog except for the chart.
I'm working with vuejs, with the webpack template.

Hope you can help me.

Expected Behavior

Printing should work in IE11

Actual Behavior

Printing does not work in IE11. When attempting to print, a message is displayed in the console stating: "TypeError: Object doesn't support property or method 'assign'". It looks like this is caused by printd using Object.assign which isn't supported in IE11, so it needs a polyfill.

Steps to Reproduce the Problem

1. In IE11 attempt to print using code like the following:

const printd = new Printd();
d.print( document.getElementById('myelement'), [ cssText ] );

Workaround

Manually polyfill Object.assign, but I think the distributable code for printd should already be including the polyfill.

Specifications

• Version: v1.4.1
• Node version: v12.16.2
• Browser version: IE11 - v11.1425.17134.0

Expected Behavior

A selected option of select html tag should be printed

Actual Behavior

By default, the printed version is showing the first option of select tag and not the selected option.

Steps to Reproduce the Problem

1. Insert a select tag with multiple options
2. Select the second, thirth, fourth... option, what you prefer
3. When you print the page always the first option is showed

Workaround

...

Specifications

• Version: v1.4.1
• Platform: v0.0.0
• Node version: v10.15.3
• Browser version: Chrome Versión 83.0.4103.61

Web Version

Printed Version

Hello,

How can I use a css file located at the very same folder that is the .ts file using Printd. I mean, i want to use a sibling css file instead of passing plain text to the print function?. I've tried a lot of path form (absolute, relative), etc.

By the way, thanks a lot for the code!
Greetings!

Expected Behavior

Creating an instance of Printd passing an options object should function without errors.

Actual Behavior

Appending the iframe on the parent element results in an error "TypeError: parent.appendChild is not a function";
Passing manually window.document.body as the parent field of the options object doesn't solve the problem.

Steps to Reproduce the Problem

const options = { headElements }
const p = new Printd(options)

Specifications

• Version: v1.3.0

Expected Behavior

Hi!
Is there a way to automatically include a page counter in the footer of all pages?

Specifications

• Browser version: IE, Chrome and Firefox

Give an idea of how to change the title.

Expected Behavior

open print dialog

Actual Behavior

no action => when looking at the browser-console, there is no output
when looking at the browser-elements the iframe gets successfully created

Steps to Reproduce the Problem

use printURL function like following:

    d.printURL(fileWithSignedUrl.signedUrl, ({ launchPrint }) => {
      console.log('Content loaded!')

      // fire printing!
      launchPrint()
    })

in the usecase above the url is a signed url from gcp storage, but we also tried it with another file

Workaround

none

Specifications

• Version: v1.6.0
• Node version: v18.x.x
• Platform: Windows
• I tried multiple browsers (edge, chrome, firefox)

Maybe related to: #18

Expected Behavior

display style tailwingcss 3

Actual Behavior

not display style tailwingcss

Steps to Reproduce the Problem

i try 2 way to add tailwindcss but print not display tailwind style
1.

const d = new Printd()
d.print(element, [], ['https://cdn.tailwindcss.com']

 const tailwind = document.createElement('script')
 tailwind.setAttribute('src', 'https://cdn.tailwindcss.com')

 const d = new Printd({
    headElements: [tailwind],
 })

 d.print(element)

Specifications

• Version: ^1.6.0
• Node version: v18.19.0

Expected Behavior

Upon clicking print in our application, the print dialog should show and allow us to print the data we send through
...

Actual Behavior

Upon clicking print, nothing appears and you are unable to click on anything on the webpage. You have to refresh to get it back to normal
...

Comments:
We found that it works consistently with early versions of chromium (98 & lower) but version 99 it is hit and miss.
On one device using Chrome or Brave and chromium version 99.0.4484.51, it doesn't produce the print window and on another device, with the same version of chromium it does show the print window.

When we inspect the page, it is producing the iframe with the correct data (we can open this in a new tab, and all the data is fine)

It works fine on Safari and Firefox.

Specifications

• Version: ^1.4.1
• Platform: MAC and Windows
• Browser version: see above

First, thank you for your very useful utility code.

As you've pointed out if the div contains a select element, Printd prints the default selection rather than what the user has chosen. Your demo has this issue.

To fix, you can make the following 3 changes.

• Add id to select: id="lang"
• Add this generic function to the end of your JavaScript.

function updateSelectedAttribute(e) {
  let sel, i;

    sel = document.getElementById(e.target.id);
    // remove 'selected' from prior user selection
    for (i = 0; i < sel.length; i += 1) {
      sel[i].removeAttribute("selected");
    }
    // and add 'selected' to current selection
    sel[sel.selectedIndex].setAttribute("selected", "selected");
}

• Add the change event listener.

document.getElementById("lang").addEventListener("change", updateSelectedAttribute);

I have tested this in current versions of Chrome, Edge, and Firefox. I have not tested it with any mobile device.

Make these changes and Printd will print what the user has selected. Probably best to have a demo that does what developers expect. ;-)

Expected Behavior

it's possible to printURL with params?

I have this dynamic endpoint ${process.env.API_URL}/invoice/${this.invoice.id} but I got 404 not found, but if I change the url to a string said http://127.0.0.1:8080/invoice/13, I am able to see invoice.

d.printURL(`${process.env.API_URL}/invoice/${this.invoice.id}`, ({ launchPrint }) => {
    console.log("Content loaded!");
    // fire printing!
    launchPrint();
  });

...

Actual Behavior

...

Steps to Reproduce the Problem

1. ...
2. ...
3. ...

Workaround

...

Specifications

• Version: v0.0.0
• Platform: v0.0.0
• Node version: v0.0.0
• Browser version: v0.0.0