diff --git a/app/public/index.html b/app/public/index.html index f76b0cd..4284133 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -15,17 +15,18 @@

H5Web Web Component Test

- diff --git a/app/src/h5-element.tsx b/app/src/h5-element.tsx index a5ee071..763efeb 100644 --- a/app/src/h5-element.tsx +++ b/app/src/h5-element.tsx @@ -8,6 +8,7 @@ export class H5WebViewer extends HTMLElement { private shadow?: ShadowRoot; private container?: HTMLDivElement; private _file?: File; + private _fileName?: string static get observedAttributes() { return []; @@ -34,9 +35,28 @@ export class H5WebViewer extends HTMLElement { this.unmount(); } - set file(file: File) { - this._file = file; - this.mount(); + set base64Data(base64Data: string) { + this._file = this.base64ToFile(base64Data); + if (this.container && this.isConnected) { + this.mount(); + } + } + + set fileName(name: string) { + this._fileName = name; + if (this.container && this.isConnected) { + this.mount(); + } + } + + private base64ToFile(base64Data: string, filename = this._fileName, mimeType = ''): File { + const base64 = base64Data.split(',')[1] + const binary = atob(base64); + const bytes = new Uint8Array(binary.length); + for (let i = 0; i < binary.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + return new File([bytes], filename as string, { type: mimeType }); } private mount() { diff --git a/app/src/h5-wrapper.tsx b/app/src/h5-wrapper.tsx index 2666e9c..3c904c7 100644 --- a/app/src/h5-wrapper.tsx +++ b/app/src/h5-wrapper.tsx @@ -11,7 +11,7 @@ function H5Wrapper({ file }: Props) { } return ( -
+
diff --git a/app/src/index.ts b/app/src/index.ts index 1c44296..ec2a2d3 100644 --- a/app/src/index.ts +++ b/app/src/index.ts @@ -1,3 +1,5 @@ import { H5WebViewer } from "./h5-element"; -customElements.define('h5web-viewer', H5WebViewer); +if (!customElements.get('h5web-viewer')) { + customElements.define('h5web-viewer', H5WebViewer); +}