vue---- H5页面 pdf,docx,excel文件预览&&下载功能

vue---- H5页面 pdf,docx,excel文件预览&&下载功能

pdf,docx,excel文件预览&&下载适用于vue2和vue3,示例为vue3

1.npm下载这些文件的插件(选择自己需要预览的进行下载)

javascript 复制代码
安装pdf组件
npm install @vue-office/pdf vue-demi

安装docx组件
npm install @vue-office/docx vue-demi

安装excel组件
npm install @vue-office/excel vue-demi

2.页面渲染完整代码,包含了预览和下载的功能

javascript 复制代码
<template>
    <view class="h-[100%] w-[100%]">
        <view class="mb-[100rpx] absolute">
            <top-nav
                title="预览"
                backShow
                :sheetShow="true"
                nameIcon="download"
                @sheetShowBtn="download"
            >
                <text class="text-[#333333] text-[28rpx]">下载</text>
            </top-nav>
        </view>

        <view class="h-[99vh] w-[100%] relative pt-[50px]">
            <view class="w-[100%] h-[100%]">
                <vue-office-pdf :src="url" v-if="type == 'pdf'" />
                <vue-office-docx :src="url" v-if="type == 'docx' || type == 'doc'" />
                <vue-office-excel :src="url" v-if="type == 'xlsx' || type == 'xls'" />
            </view>
            <!-- <iframe
                :src="'http://www.pfile.com.cn/api/profile/onlinePreview?url=' + url"
                style="width: 100%; height: 100%; border: none; margin-top: 50px"
            ></iframe> -->
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'

import '@vue-office/excel/lib/index.css'
import '@vue-office/docx/lib/index.css'

const url = ref('') // 文件地址
const attach_name = ref('') // 文件名
const type = ref('') // 文件类型

onLoad((options) => {
    url.value = decodeURIComponent(options.url!)
    attach_name.value = options.name
    type.value = options.type
    console.log(attach_name.value)
})

/**
 * @description: 点击下载按钮
 * @return {*}
 */
const download = () => {
    downloadFile(url.value, attach_name.value)
}

/**
 * @description:  下载文件
 * @param {*} url 链接地址
 * @param {*} fileName 文件名
 * @return {*}
 */
async function downloadFile(url, fileName) {
    try {
        const response = await fetch(url)
        if (!response.ok) {
            throw new Error('文件下载失败,状态码: ' + response.status)
        }
        // 将响应内容转换为 Blob
        const blob = await response.blob()
        // 创建 Blob URL
        const blobUrl = URL.createObjectURL(blob)
        // 创建一个隐藏的 <a> 标签
        const link = document.createElement('a')
        link.href = blobUrl
        link.download = fileName // 设置文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // 释放 Blob URL
        URL.revokeObjectURL(blobUrl)
        console.log('文件下载成功:', fileName)
    } catch (error) {
        console.error('文件下载失败:', error)
    }
}
</script>

示例图片:

相关推荐
江城开朗的豌豆2 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
最懒的菜鸟3 分钟前
MinerU将PDF转成md文件,并分拣图片
人工智能·pdf
架构个驾驾9 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
梨子同志38 分钟前
Vue 生命周期
前端·vue.js
梨子同志38 分钟前
Vue 组件通信详解
前端·vue.js
拾光拾趣录41 分钟前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
markyankee10143 分钟前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js
拾光拾趣录44 分钟前
在 Vue 中使用 SVG 图标
前端·vue.js·svg
顽疲2 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
禁默3 小时前
Linux Vim 编辑器详解:从入门到进阶(含图示+插件推荐)
linux·vim·excel