更新记录

1.0.2（2025-05-19） 下载此版本

清理无用文件

1.0.1（2025-05-19） 下载此版本

上传示例项目

1.0.0（2025-05-19） 下载此版本

发布插件

平台兼容性

uni-app

其他

cjx-previewOffice

说明

因为在uniapp生态上找不到同时适合H5端，安卓，ios预览pdf-excel-word-txt文件的插件，所以开发了兼容多端的预览插件。该插件是纯前端开发；

可以配合cjx-upload插件 进行任意文件的选择

使用

Attributes

Exposes

Slot插槽

vue:

<view class="content">
    <view class="list" style="display: flex;margin-top: 40rpx;">
        <view class="label">
            pdf
        </view>
         <CjxUpload :multiple="true" accept="pdf/*,.pdf"  v-model="pdfValue" @change="uploadChange" >
             <template #file="{ file }">
                 <cjx-previewOffice
                    ref="previewOfficeRef"
                    :value="file.url || file.base64Url"
                    :name="file.name"
                    type="pdf"
                >
                    {{ file.name }}
                 </cjx-previewOffice>
             </template>

         </CjxUpload>
    </view>

    <view class="list" style="display: flex;margin-top: 40rpx;">
        <view class="label">
            excel
        </view>
         <CjxUpload :multiple="true" accept="xlsl/*,.xls,.xlsl" v-model="excelValue" @change="uploadChange" >
             <template #file="{ file }">
                 <cjx-previewOffice
                    ref="previewOfficeRef"
                    :value="file.url || file.base64Url"
                    :name="file.name"
                    type="excel"
                >
                    {{ file.name }}
                 </cjx-previewOffice>
             </template>

         </CjxUpload>
    </view>

    <view class="list" style="display: flex;margin-top: 40rpx;">
        <view class="label">
            word
        </view>
         <CjxUpload :multiple="true" accept="docx/*,.docx" v-model="wordValue" @change="uploadChange" >
             <template #file="{ file }">
                 <cjx-previewOffice
                    ref="previewOfficeRef"
                    :value="file.url || file.base64Url"
                    :name="file.name"
                    type="word"
                >
                    {{ file.name }}
                 </cjx-previewOffice>
             </template>

         </CjxUpload>
    </view>

    <view class="list" style="display: flex;margin-top: 40rpx;">
        <view class="label">
            txt
        </view>
         <CjxUpload :multiple="true" accept="txt/*,.txt" v-model="txtValue" @change="uploadChange" >
             <template #file="{ file }">
                 <cjx-previewOffice
                    ref="previewOfficeRef"
                    :value="file.url || file.base64Url"
                    :name="file.name"
                    type="txt"
                >
                    {{ file.name }}
                 </cjx-previewOffice>
             </template>

         </CjxUpload>
    </view>

温馨提示

• 文件上传
  1. 如说明表达还不够清楚，不清楚怎么使用可导入完整示例项目运行体验和查看
  2. 如果想使组件支持更多功能请留言