caimei-database-caimei/src/components/ppt-preview/ppt-preview.vue

<template>
  <div class="preview">
		<iframe :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`" frameborder="0"></iframe>
	</div>
</template>

<script setup lang="ts">
import { IProps } from "../pdf-preview/index.type";
import { onMounted } from 'vue';

const props = defineProps<IProps>();

const toBlob = (url: string) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((response) => response.blob())
      .then((blob) => {
        resolve(blob);
      })
      .catch((err) => reject(err));
  });
};

const toArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
	return new Promise((resolve) => {
		const reader = new FileReader()
		reader.onload = () => resolve(reader.result as ArrayBuffer);
		reader.readAsArrayBuffer(blob)
	})
}

const initData = async () => {
  const b = await toBlob(props.url);
	const ab = await toArrayBuffer(b as Blob);
	console.log(props.url, ab);
};

onMounted(() => {
	initData()
})
</script>

<style scoped lang="scss">
.preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-height: 100vh;
  overflow: auto;
	iframe {
		width: 100%;
		height: 100vh;
	}
}
</style>