使用 formio 呈现 iframe

Question

我正在尝试制作一个新的 formio.js 组件来呈现 iframe，因为我想要一些易于显示 PDF 文件的东西，但 iframe 不起作用。除了 iframe 之外的所有内容都已呈现... 我也没有成功使用 html 元素。有人已经这样做了吗？

这是我的观点：

<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>

结果：

谢谢

Answer 1

找到方法了！如果有人遇到同样的麻烦：

1) 添加一个带有 ref 属性的 :

<div>
    <p>{{ ctx.schema.title }}</p>
    <div ref="{{ ctx.key }}"></div>
</div>

更改附加函数中的 innerHTML :

  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);
  }

使用 formio 呈现 iframe

Render an iframe using formio

javascript

forms

pdf

iframe

formio