前端解决方案 - office 系列文件预览 - ToB企服应用市场:ToB评测及商务社交产业平台

<script setup lang="ts">
import { ref } from 'vue'
// 预览地址
const officeUrl = ref('')
// 资源地址
const docx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
const xlsx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
const pptx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pptx'
const pdf = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
// 使用微软 Office Web Viewer 服务预览 office 文件
const previewOffice = (url: string) => {
// 考虑到特殊字符，通过 encodeURIComponent 处理一下 url
officeUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
}
// 复制分享地址
const copyToClipboard = async (text: string) => {
await navigator.clipboard.writeText(text)
alert('复制成功')
}
</script>
<template>
<div class="container">
<div class="btns">
<button @click="previewOffice(docx)">预览docx</button>
<button @click="previewOffice(xlsx)">预览xlsx</button>
<button @click="previewOffice(pptx)">预览pptx</button>
<button @click="officeUrl = pdf">预览pdf</button>
<button class="copy-btn" v-if="officeUrl" @click="copyToClipboard(officeUrl)">
复制分享地址
</button>
</div>
<iframe class="previewOffice" :src="officeUrl"></iframe>
</div>
</template>
<style lang="scss">
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
.previewOffice {
flex: 1;
}
.copy-btn {
background-color: #070;
color: #fff;
}
}
</style>

复制代码

<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
// 设置 workerSrc 的值，cdn 远程加载
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`
const canvasRef = ref<HTMLCanvasElement>()
const previewPdf = async (event: Event) => {
// 获取文件
const file = (event.target as HTMLInputElement).files?.[0]
// 获取 canvas
const canvas = canvasRef.value
if (file && canvas) {
const ctx = canvas.getContext('2d')
if (!ctx) return
const data = await file.arrayBuffer()
pdfjsLib.getDocument({ data }).promise.then((pdf) => {
pdf.getPage(1).then((page) => {
const viewport = page.getViewport({ scale: 1.5 })
canvas.width = viewport.width
canvas.height = viewport.height
page.render({ canvasContext: ctx, viewport })
})
})
}
}
</script>
<template>
<input type="file" accept=".pdf" @change="previewPdf" />
<br />
<canvas ref="canvasRef"></canvas>
</template>

复制代码

<script setup lang="ts">
import * as pdfjsLib from 'pdfjs-dist'
import { ref } from 'vue'
import axios from 'axios'
// 设置 workerSrc 的值，cdn 远程加载
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`
const canvasRef = ref<HTMLCanvasElement>()
const file = ref()
const getFile = async () => {
const res = await axios({
method: 'get',
url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf',
responseType: 'arraybuffer',
})
file.value = res.data
}
const previewFile = async () => {
await getFile()
const canvas = canvasRef.value
if (file.value && canvas) {
const ctx = canvas.getContext('2d')
if (!ctx) return
const data = new Uint8Array(file.value)
pdfjsLib.getDocument({ data }).promise.then((pdf) => {
pdf.getPage(1).then((page) => {
const viewport = page.getViewport({ scale: 1.5 })
canvas.width = viewport.width
canvas.height = viewport.height
page.render({ canvasContext: ctx, viewport })
})
})
}
}
</script>
<template>
<button @click="previewFile">获取文档</button>
<br />
<canvas ref="canvasRef"></canvas>
</template>

复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { defaultOptions, renderAsync } from 'docx-preview'
// 定义一个 ref 来存储容器元素
const container = ref<HTMLElement>()
// 定义一个异步函数 previewFile 来预览文档
const previewFile = async (event: Event) => {
// 获取上传的文件
const file = (event.target as HTMLInputElement).files?.[0]
if (file && container.value) {
// 将文件转换为 ArrayBuffer
const arrayBuffer = await file.arrayBuffer()
// 调用 renderAsync 方法来渲染文档
await renderAsync(arrayBuffer, container.value, undefined, {
...defaultOptions,
className: 'docx',
inWrapper: true,
ignoreWidth: false,
ignoreHeight: false,
ignoreFonts: false,
breakPages: true,
ignoreLastRenderedPageBreak: true,
experimental: false,
trimXmlDeclaration: true,
debug: false,
})
}
}
</script>
<template>
<div>
<input type="file" accept=".docx" @change="previewFile" />
<div ref="container"></div>
</div>
</template>

复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { defaultOptions, renderAsync } from 'docx-preview'
import axios from 'axios'
// 定义一个 ref 来存储容器元素
const container = ref<HTMLElement>()
const fileRef = ref()
const getFile = async () => {
const res = await axios({
method: 'get',
url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx',
// 返回类型为 arraybuffer
responseType: 'arraybuffer',
})
fileRef.value = res.data
}
// 定义一个异步函数 previewFile 来预览文档
const previewFile = async () => {
// 获取文档
await getFile()
// 获取 arraybuffer
const file = fileRef.value
if (file && container.value) {
// 调用 renderAsync 方法来渲染文档
await renderAsync(file, container.value, undefined, {
...defaultOptions,
className: 'docx',
inWrapper: true,
ignoreWidth: false,
ignoreHeight: false,
ignoreFonts: false,
breakPages: true,
ignoreLastRenderedPageBreak: true,
experimental: false,
trimXmlDeclaration: true,
debug: false,
})
}
}
</script>
<template>
<button @click="previewFile">获取文档</button>
<br />
<div ref="container"></div>
</template>

复制代码

<script setup lang="ts">
import { ref } from 'vue'
import { read, utils } from 'xlsx'
// 本地选择文件
const rows = ref<any>([])
const previewFile = async (event: Event) => {
// 获取上传的文件
const file = (event.target as HTMLInputElement).files?.[0]
if (file) {
// 将文件转换为 ArrayBuffer
const arrayBuffer = await file.arrayBuffer()
// 读取 Sheets
const sheet = read(arrayBuffer).Sheets
/* 渲染数据 */
rows.value = utils.sheet_to_json(sheet['Data'])
}
}
</script>
<template>
<input type="file" accept=".xlsx" ref="fileInput" @change="previewFile" />
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr v-for="(item, index) in rows" :key="index">
<td>{{ item.Name }}</td>
<td>{{ item.Index }}</td>
</tr>
</tbody>
</table>
</template>

复制代码

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { read, utils } from 'xlsx'
const getFile = async () => {
const res = await axios({
method: 'get',
url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx',
// 返回类型为 arraybuffer
responseType: 'arraybuffer',
})
return res.data
}
const rows = ref<any>([])
const previewFile = async () => {
const arrayBuffer = await getFile()
if (arrayBuffer) {
// 读取 Sheets
const sheet = read(arrayBuffer).Sheets
/* 渲染数据 */
rows.value = utils.sheet_to_json(sheet['Data'])
}
}
</script>
<template>
<button @click="previewFile">获取文档</button>
<br />
<table>
<thead>
<th>Name</th>
<th>Index</th>
</thead>
<tbody>
<tr v-for="(item, index) in rows" :key="index">
<td>{{ item.Name }}</td>
<td>{{ item.Index }}</td>
</tr>
</tbody>
</table>
</template>

复制代码

<script setup lang="ts">
// 引入 VueOffice 组件
import VueOfficePdf from '@vue-office/pdf'
import { ref } from 'vue'
// 设置文档网络地址，可以是本地文件
const src = ref()
// 本地预览
const previewFile = async (event: Event) => {
src.value = (event.target as HTMLInputElement).files?.[0]
}
// 请求预览
const getFile = () => {
src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
}
</script>
<template>
<button @click="getFile">获取远程</button>
<input type="file" accept=".pdf" @change="previewFile" />
<vue-office-pdf :src="src" style="height: 100vh" />
</template>

复制代码

```vue
<script setup lang="ts">
// 引入 VueOffice 组件
import VueOfficeDocx from '@vue-office/docx'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import { ref } from 'vue'
// 设置文档网络地址，可以是本地文件
const src = ref()
// 本地预览
const previewFile = async (event: Event) => {
src.value = (event.target as HTMLInputElement).files?.[0]
}
// 请求预览
const getFile = () => {
src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
}
</script>
<template>
<button @click="getFile">获取远程</button>
<input type="file" accept=".docx" @change="previewFile" />
<vue-office-docx :src="src" style="height: 100vh" />
</template>

复制代码

<script setup lang="ts">
// 引入 VueOffice 组件
import VueOfficeExcel from '@vue-office/excel'
// 引入相关样式
import '@vue-office/excel/lib/index.css'
import { ref } from 'vue'
// 设置文档网络地址，可以是本地文件
const src = ref()
// 本地预览
const previewFile = async (event: Event) => {
src.value = (event.target as HTMLInputElement).files?.[0]
}
// 请求预览
const getFile = () => {
src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
}
</script>
<template>
<button @click="getFile">获取远程</button>
<input type="file" accept=".xlsx" @change="previewFile" />
<vue-office-excel :src="src" style="height: 100vh" />
</template>

复制代码