javascriptformspdfiframeformio

Render an iframe using formio

I'm tring to make a new formio.js component to render iframes because i want something easy to show PDF files for example but the iframe does not work. Everything is rendered except the iframe... I did not succeed to use the html element neither. Did someone aldready did this ?

Here's my view :

<div>
    <p>{{ ctx.schema.title }}</p>
    <iframe
        src="https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0.html?id=elr4tq&amp;builder=1"
        id="iframe-elr4tq" seamless="true" class="formio-iframe"></iframe>
    <p>cc</p>
</div>

and the result : enter image description here

Thank you

Solution

  • Found the way to make it ! If someone is having the same trouble :

    1) Add a with a ref attribute :

    <div>
    <p>{{ ctx.schema.title }}</p>
    <div ref="{{ ctx.key }}"></div>
</div>
    1. Change the innerHTML within the attach function :
      attach(element) {
    const refs = {};
    refs[this.component.key] = "pdf_div" // on recupere le ref="{{ ctx.key }}"

    this.loadRefs(element, refs); // Chargement de tous les refs

    this.div_pdf = Array.prototype.slice.call(this.refs[this.component.key], 0)[0]; // Return an array of matching refs (with [this.component.key])
    
    this.div_pdf.innerHTML = '<iframe src="" width="" height=""></iframe>' // Set the iframe to see the pdf

    // Allow basic component functionality to attach like field logic and tooltips.
    return super.attach(element);
  }