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>

示例图片:

相关推荐
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
paid槮12 小时前
HTML5如何创建容器
前端·html·html5
midsummer_woo13 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
喝拿铁写前端14 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
豆豆(设计前端)14 小时前
如何成为高级前端开发者:系统化成长路径。
前端·javascript·vue.js·面试·electron
苦瓜若叶睦15 小时前
Vue (Official) v3.0.2 新特性 为非类npm环境引入 globalTypesPath 选项
vue.js
springfe010115 小时前
模块与组件区别
javascript·vue.js
小胖同学~16 小时前
H5新增属性
html5
结衣结衣.16 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js