使用 formio 渲染 iframe答案

【问题标题】：Render an iframe using formio使用 formio 渲染 iframe
【发布时间】：2021-07-17 16:24:51
【问题描述】：

我正在尝试制作一个新的 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>

结果：

谢谢

【问题讨论】：

ID和类的样式属性是什么？
我采用了formio doc的示例iframe，因此id和class样式是我导入的文件上的样式。如果我删除它们，它是一样的。这不是宽度或高度，因为 iframe 甚至不在“检查”选项卡上
您的 HTML 代码是否在某个框架内？（例如 Symfony、Laraval...）
不，我使用 webpack formio contrib 开发了我的组件，然后我在 index.html 中使用了构建版本（.js 和 .css 文件）

标签： javascript forms pdf iframe formio

【解决方案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);
  }

【讨论】：