Trying to download using html element

Hello community,

I’m trying to convert data from my html element to a pdf file.

now i get the following error.
Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See Chrome Platform Status for more details.

anyone knows if there is a workaround?

Kind regards,
Kristof.

1 Like

If you have a premium account, use a custom element (you can also use the custom element to create an iframe that is not sandboxed).

HI J.D.

I have a premium account, the problem is that the premium account is linked to another website at the moment.
I’m creating a whole new website with a custom order application for our customers.

Now about the custom element.
Are there any tutorials about how to create an html iframe wth it?
Is it possible to test them on a preview page to test them?

or is it possible using pdfkit to convert to pdf directly without using an iframe?
i tried it but can’t figure it out, i always get this error:
_pdfkit.PDFDocument is not a constructor

Kind regards,
Kristof.

Hi @jonatandor35

I tried making an custom element (made a new page on the premium website)
I can add text to my custom element, even html tags are possible.
but i can’t figure out how to add a button… it just displays as text…

also about adding scripts, i’m not sure how to do that…

any idea where i can find a tutorial about it or something that can help me?

kind regards,
Kristof.

@volkaertskristof ,

let html = `<button>Download</button>`;
//add other features to the download element
// in the html element:
//...
 connectedCallback() { 
this.innerHTML =    html 
}
/...

P.S. if you wish to allow PDF download, you may consider using fetch & blob (this way you want event need to use a custom element or an iframe. I published here an example how to do a few weeks ago. You can search the forum)

Hi @jonatandor35 ,

Thanks for responding,
when i try your code :

let html = `<button>Download</button>`

class MyCustomElement extends HTMLElement {
  constructor() {
 super();
  }
  connectedCallback() {
 this.innerHTML = html
  }
}

customElements.define('my-custom-element', MyCustomElement);

i just get plain text on my page.


Its not clickable, tried to add a onClick attribute, but that didn’t change anything its not clickable.

about the fetch & blob, i could find the post you where refering to.

Kind regards,
Kristof.

@volkaertskristof It is clickable (but you should style it with cursor:pointer and maybe some css to transform a little bit on active state).
But to of course it has no functionality unless you add a href or a click event listener.

I don’t know what you’re trying to download but some files (such as PDF) might get displayed instead of downloaded even if you set the “download” attribute, and to have them downloaded you need to use blob (I published an example on how to do it a few weeks ago. Search the forum. In this case you don’t need a custom element).

Sorry if it’s not detailed enough but I have no time to get into details right now. You’ll have to search the web.

@jonatandor35
I just need to download data from tables in a repeater.
if its possible without an custom element that would be wonderfull however i didn’t find how to do it.

(I published an example on how to do it a few weeks ago. Search the forum. In this case you don't need a custom element).

Any idea on what the title was?
i searched alot and didn’t find anything working.

Sorry if it's not detailed enough but I have no time to get into details right now. You'll have to search the web.

No problem, i’ll keep searching the web in the meantime.

Kind regards,
Kristof

@volkaertskristof
“… download data from tables in a repeater” the data in the repeater are not a file and you can’t download it as is.
You have the following option:

  1. To create a button to print the webpage (a custom element is needed but it’s pretty easy. As a matter of fact this is the easiest option).

  2. You can convert it into a PDF file or a csv file (you’ll need to install an npm in order to do it).

  3. Then: You can let the user download it:

  4. if it’s a csv file you can let the user download it on click,

  5. If it’s a PDF you may need to use blob if you whish the user to download it on click (in both cases no to use a custom element.

  6. instead of downloading it, you can use an email service and attach the file to an email message.

Hi @jonatandor35
Thanks for taking the time to repsond.

To create a button to print the webpage (a custom element is needed but it’s pretty easy. As a matter of fact this is the easiest option).

If its possible to print part of a webpage (like only a container box), that would be a good way to start. Otherwhise its sadly enough not the option i’m looking for.


2) You can convert it into a PDF file or a csv file (you’ll need to install an npm in order to do it).
a) ii) If it’s a PDF you may need to use blob if you whish the user to download it on click (in both cases no to use a custom element

I tried using pdfkit, but it doesn’t do anything.
If i’m correct, an npm should be used in a backend file.
i did and i don’t get any errors, sadly enough i don’t get any output aswel.
Might need to get deeper into this since since i never really worked with any npm before.


2) b) instead of downloading it, you can use an email service and attach the file to an email message.

This will be the next step to send an email to the customers and to ourself.
But if we are able to let customers download their order to pdf from the website i will already be happy :slight_smile:


About a previous reply

I don’t know what you’re trying to download but some files (such as PDF) might get displayed instead of downloaded even if you set the “download” attribute, and to have them downloaded you need to use blob (I published an example on how to do it a few weeks ago. Search the forum. In this case you don’t need a custom element).

I still didn’t find it.
Is it an example you made yourself or is it a reply to a post from someone?

Kind regards,
Kristof.

@volkaertskristof

  1. It is possible to print a specific part of the page using custom element but it’s more complicated (especially on Wix). alternatively you can hide the other elements while printing.

  2. It was answer to someone who asked about it.

@jonatandor35
Hi me again :smiley:
I’m sorry for all the question.
this might be the last one…
Back to the start i asked if there is a workaround for:

Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See Chrome Platform Status for more details.

Is it only disallowed for free users?
i tested a small script on my payed version and it did download a pdf…

Kind regards,
Kristof.

@volkaertskristof Wix iframes are sandboxed and therefore have limitations (and that’s true for premium accounts as well).
If you create an iframe of your own using custom elements you’re not limited.