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 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
百锦再4 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
冬夜戏雪4 小时前
基于rapidocr 的文档解析(pdf转md)工具(已部署)
pdf·运维开发
Sheldon一蓑烟雨任平生4 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
wangbing11255 小时前
EXCEL文本数字如何批量转换为数字
excel
vfvfb6 小时前
批量获取pdf中姓名电话 自动获取pdf中指定的文字
pdf·pdf提取文字·pdf提取指定字符·提取pdf内容
YUELEI1186 小时前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript
前端付豪8 小时前
万事从 todolist 开始
前端·vue.js·前端框架
华仔啊9 小时前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
月弦笙音10 小时前
【Vue3】Keep-Alive 深度解析
前端·vue.js·源码阅读