Reference HTML file in iframe

Jonalxh

Hi guys, I need to open an static HTML file inside an iframe because I need it to be printed silently, I’m trying setting the iframe src with absolete and relative paths but none of them work, I’ve tried moving my files inside public, static and assets folders with no success, I’ve seen that some people uses process.env.BASE_URL to access absole path of environment but it doesn’t work in Quasar.

Currently I have my files in a folder called ticketTemplates inside public folder placed at root, and it has two files: template1.html and template1.css, I’m doing the following:

<iframe src="ticketTemplates/first.html" frameborder="1"></iframe>

But as I said before it does not with relative or absolute paths.
Could you tell me how to achieve it?

beets

@Jonalxh Are you doing this during quasar dev or on a deployed site? Can you try to access the files directly first? i.e. http://localhost:8080/ticketTemplates/first.html

Does it show? Also check the network inspector in chrome / firefox and see if any headers like x-frame-options is set on that response. It shouldn’t be there during the dev server but could be on production depending on your server settings.

Jonalxh

Hi @beets I’ve tried with http://localhost:8080/ticketTemplates/first.html and result is the same:

Cannot GET /ticketTemplates/first.html

I’m just executing quasar dev in development, not in production.

beets

@Jonalxh Can you run quasar info to get the version you’re using?

$ quasar info
...
Important local packages
  quasar - 1.15.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.1.14 -- Quasar Framework local CLI
  @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations
...

Run the command and paste the above three lines here so we can check which version of quasar you’re on. You mention both the static and public folder, with the former on quasar/app v1 and the latter on v2.

Assuming you are on quasar/app v2, just to make sure, the public folder is in the root of your project, next to quasar.conf.js and the ticketTemplates folder is inside that, correct?

Jonalxh

quasar info result is:

Important local packages quasar - 1.14.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 1.9.6 -- Quasar Framework local CLI @quasar/extras - 1.9.12 -- Quasar Framework fonts, icons and animations

The answer of your question is correct, public folder is in root beside quasar.conf.js and ticketTemplates folder is inside.

beets

@Jonalxh Okay, so you’re using @quasar/app 1.9.6, which doesn’t use the public folder. Instead you would use src/statics/ticketTemplates. It sounds like you may have tried it, but perhaps the statics folder wasn’t inside the src folder. In any case, try moving it to the statics folder again and try http://localhost:8080/ticketTemplates/first.html

Note that if you do want to upgrade to quasar/app v2, you’d have to follow this 5 minute upgrade guide: https://quasar.dev/quasar-cli/app-upgrade-guide . Make sure you work on a new git branch or otherwise save all changes before attempting to upgrade, just in case.

beets

Sorry I just had a look at the older docs, after placing the folder in src/statics/ticketTemplates I believe you’ll need to access it as http://localhost:8080/statics/ticketTemplates/first.html and

<iframe src="statics/ticketTemplates/first.html" frameborder="1"></iframe>

Jonalxh

You’re right, I’ve created a new project with updated resources and now it works.

In production it will be available in the same way (same url)?

Thanks a lot.

beets

@Jonalxh It will in fact be the same in production. Basically just if you are pre quasar/app v2 you had to prepend statics/ to each path, which is why v2 introduced the public folder so you could have paths like example.com/favicon.ico from the public dir.

Jonalxh

Awesome, thanks a lot @beets .