use srcdoc attribute to set html content

This commit is contained in:
Peter Morton 2023-10-16 21:52:48 -05:00
parent 6c044f57ab
commit 072325ad0e
2 changed files with 41 additions and 9 deletions

View File

@ -0,0 +1,30 @@
<script>
export default {
props: {
title: { type: String, default: "Integration Card" },
doc: { type: String, default: "<html><body><p>HTML document</p></body></html>" },
},
};
</script>
<template>
<h3>{{ title }}</h3>
<iframe class='integrationCard' :srcdoc=doc scrolling="no" onload="resizeIframe(this)"></iframe>
</template>
<style>
span.customer {
color: #ff0000;
font-weight: bold;
}
span.iva {
color: #0000a0;
font-weight: bold;
}
iframe.integrationCard {
border: 0;
width: 100%; height: 100%;
}
</style>

View File

@ -1,18 +1,15 @@
<script>
// This template uses https://vuejs.org/guide/extras/render-function.html to
// create DOM elements from properties
import { h } from "vue";
export default {
props: {
summary: { type: String, default: "<h2>Summary Should go here</h2>" },
},
setup(props) {
// return the render function
return () => h("div", { class: "bar", innerHTML: props.summary });
summary: { type: String, default: "<p>Summary Should go here</p>" },
},
};
</script>
<template>
<h3>Da Vinci Transfer Summary</h3>
<iframe class='transferSummary' :srcdoc=summary scrolling="no" onload="resizeIframe(this)"></iframe>
</template>
<style>
span.customer {
color: #ff0000;
@ -23,4 +20,9 @@ span.iva {
color: #0000a0;
font-weight: bold;
}
iframe.transferSummary {
border: 0;
width: 100%; height: 100%;
}
</style>