Render iframes as an image when exporting to PDF

[0ffz]

I'm using some javascript libraries to make charts within my document right now, and I'm happy using iframes and pointing to a file as a sort of asset to generate them. It works perfectly fine within Typora or when exporting HTML, however for obvious reasons the iframe goes missing when exporting to PDF. I would like the iframe to be rendered and embedded into the PDF file in some way instead.

Some possible issues I can think of:

• Should the iframe be cut off at its defined height when rendering, or should the entire scrollable portion be rendered.
• Depending on the rendering method, if there are elements that move when scrolling, things may look wonky in the render (this isn't an issue if the frame is cut of off as described above.)
• What to do when the iframe extends beyond the exported page height.

Apologies if there's an existing way of doing something similar that I don't know of. Thanks in advance!

[shoriwe]

This will be extremely useful. I currently use Typora to make some reports using a custom monitoring system that render charts, this charts aren't dynamic but since they are rendered using CSR Apache Echarts Canvas I am unable to see when exporting to PDF, the only solution I see is by first making an image of the Iframe container and then inserting it to Typora. It will be useful to have this feature in Typora, hope this feature is planned at least

[LFWarsen]

I currently have a similar solution since Typora doesn't have another way of showing generated graphs of maths functions. I embed a desmos.com graph, but it's still not converting it to an image when exporting.

I would really like this, or the ability to generate maths functions within Typora itself. See #5714.

[du33169]

A workaround, in case anyone still needs: Typora removes iframe elements when exporting to PDF, but it keeps any custom html tag, so we can use a custom tag as a placeholder, and write a script to replace it with a new iframe element and copy all attributes.

1. insert <iframe>...</iframe> in typora, and make sure it displays properly
2. wrap it with <my-iframe>...</my-iframe>, and copy all attributes now it looks like:

   <my-iframe src="[url]">
     <iframe src="[url]" />
   </my-iframe>

3. add the following script as extra HTML content in the Export Settings:

   <script>
   document.querySelectorAll('my-iframe').forEach(function(e) {
   var iframe = document.createElement('iframe');
   Array.prototype.slice.call(e.attributes).forEach(function(attribute) {
       iframe.setAttribute(attribute.name, attribute.value);
   });
   p.parentNode.replaceChild(iframe, e);
   });
   </script>

4. Export PDF

The nested iframe will provide a preview during editing, but will be removed after export. The custom element will be converted to an iframe by our script, which should render properly in the PDF.

Note: better use local html file because it seems that Typora does not always wait for iframe to finish loading.