图片、文件的预览

预览 = 把文件变成浏览器能展示的 URL 或 HTML

图片预览

直接URL预览

javascript 复制代码

<img :src="url" />

结合 UI 框架（如 Element Plus/Element UI）

javascript 复制代码

<template>

  <el-upload

    action="#"

    :auto-upload="false"

    :on-change="handleUploadChange"

    list-type="picture-card"

    :file-list="fileList"

  >

    <el-icon><plus /></el-icon>

  </el-upload>

  <!-- 预览弹窗 -->

  <el-image-viewer v-if="showViewer" :url-list="previewList" @close="showViewer = false" />

</template>

<script setup>

import { ref } from 'vue'

import { Plus } from '@element-plus/icons-vue'

const fileList = ref([])

const showViewer = ref(false)

const previewList = ref([])

const handleUploadChange = (file) => {

  // 自动预览选中的图片

  if (file.raw.type.startsWith('image/')) {

    previewList.value = [URL.createObjectURL(file.raw)]

    showViewer.value = true

  }

}

</script>

本地文件预览

URL.createObjectURL，浏览器给你一个临时内存地址指向文件。

javascript 复制代码

const url = URL.createObjectURL(file)

img.src = url

PDF预览

方案一：浏览器原生

javascript 复制代码

window.open(pdfUrl)

方案二：iframe嵌入

javascript 复制代码

<iframe :src="pdfUrl" />

方案三：PDF.js（自定义控制，如翻页、缩放）

javascript 复制代码

pdfjsLib.getDocument(url)

<!-- 容器 -->

<div id="pdfContainer" style="width: 100%; height: 600px;"></div>

<!-- 引入pdfjs -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<script>

// 配置pdfjs路径（关键）

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

/**

* 预览PDF文件（支持本地文件/远程URL）

* @param {string} pdfUrl - PDF URL/本地文件Blob URL

*/

const previewPdf = async (pdfUrl) => {

  const container = document.getElementById('pdfContainer')

  container.innerHTML = ''

  // 加载PDF

  const pdf = await pdfjsLib.getDocument(pdfUrl).promise

  // 渲染第一页（可扩展翻页逻辑）

  const page = await pdf.getPage(1)

  const viewport = page.getViewport({ scale: 1.5 }) // 缩放比例


  // 创建画布

  const canvas = document.createElement('canvas')

  const context = canvas.getContext('2d')

  canvas.height = viewport.height

  canvas.width = viewport.width

  container.appendChild(canvas)


  // 渲染PDF到画布

  await page.render({

    canvasContext: context,

    viewport: viewport

  }).promise

}


// 调用示例：预览远程PDF

previewPdf('https://xxx.com/file/123.pdf')


// 调用示例：预览本地PDF文件（input选择后）

document.getElementById('pdfInput').addEventListener('change', (e) => {

  const file = e.target.files[0]

  if (file.type === 'application/pdf') {

    const pdfBlobUrl = URL.createObjectURL(file)

    previewPdf(pdfBlobUrl)

  }

})

</script>

Excel / Word 预览

方案一：后端转HTML

javascript 复制代码

Excel → 后端 → HTML → 前端渲染

方案二：前端解析（仅轻量）

前端解析 Office 文件体积大、兼容性差，优先让后端转为 HTML / 图片返回；前端仅用于简单场景：

Excel（xlsx），缺点：样式丢失，合并单元格乱，大文件卡

javascript 复制代码

import * as XLSX from 'xlsx'

const data = XLSX.read(file)

<input type="file" id="excelInput" accept=".xlsx,.xls" onchange="previewExcel(this)">

<div id="excelPreviewContainer" style="margin-top: 10px; overflow-x: auto;"></div>


<!-- 引入xlsx库 -->

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

<script>

const previewExcel = (input) => {

  const file = input.files[0]

  if (!file) return


  const reader = new FileReader()

  reader.onload = (e) => {

    const data = new Uint8Array(e.target.result)

    const workbook = XLSX.read(data, { type: 'array' })

    // 取第一个sheet

    const sheetName = workbook.SheetNames[0]

    const sheet = workbook.Sheets[sheetName]

    // 转换为HTML表格

    const html = XLSX.utils.sheet_to_html(sheet)

    document.getElementById('excelPreviewContainer').innerHTML = html

  }

  reader.readAsArrayBuffer(file)

}

</script>

Word 预览（使用 docx-preview 库）

javascript 复制代码

<input type="file" id="wordInput" accept=".docx" onchange="previewWord(this)">

<div id="wordPreviewContainer" style="margin-top: 10px;"></div>

<!-- 引入依赖 -->

<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/docx-preview@0.1.13/build/docx-preview.min.js"></script>

<script>

const previewWord = (input) => {

  const file = input.files[0]

  if (!file || file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {

    alert('仅支持.docx格式')

    return

  }

  const reader = new FileReader()

  reader.onload = async (e) => {

    const arrayBuffer = e.target.result

    // 渲染Word内容

    await docxPreview.renderAsync(arrayBuffer, document.getElementById('wordPreviewContainer'))

  }

  reader.readAsArrayBuffer(file)

}

</script>

方案三：第三方服务

|---------------|
| 服务 |
| 阿里云文档预览 |
| 腾讯云COS |
| Office Online |
| Google Docs |

将文件上传到服务器，调用第三方预览接口（适合复杂文档），例如

javascript 复制代码

// 示例：阿里云OSS文件预览（需先上传文件）

const previewOnline = (fileUrl) => {

  // 拼接阿里云预览链接

  const previewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`

  // 打开新窗口预览

  window.open(previewUrl)

}

视频预览

javascript 复制代码

<video :src="url" controls />

音频预览

javascript 复制代码

<audio :src="url" controls />