今天小编给大家分享一下vue项目怎么实现前端预览word与pdf格式文件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
页面上传pdf文件效果如下：
页面预览pdf文件效果如下：
页面上传word文件效果如下：
页面预览word文件效果如下：
这里先从上传组件页面说起，上传页面组件完整代码如下，按钮里面v-show=“$checkPermission([‘Register_tuotpUpload’])“都是给这个按钮设置了按钮权限的，我们只需要关注上传那一部分的代码即可，我们用了el-upload组件实现的手动上传，由于需求要求只能上传word和pdf，所以能看到属性设置的有 accept=”.pdf, .doc, .docx”，然后不展示上传成功的文件的列表设置的属性有:show-file-list=“false”，而handleExceed回调函数和limit都是为了限制只能上传一个文件，上传前的回调钩子函数beforeAvatarUpload里进行了文件类型判断与提醒，手动上传是通过UploadFile里进行完成的，需要注意的是由于docx-preview这个插件只能预览后缀为docx的word文件，如果是doc后缀格式的word文件一定要让后端强制将上传doc格式的文件改为docx格式，目前对于doc格式的word文件实现网页在线预览我只想到了docx-preview这个插件和这个解决办法：
<template>
<div class="app-container">
<div class="cardWhite">
<div class="itemBox">
<div class="headerTitle">基本信息</div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="120px"
class="demo-ruleForm"
>
<el-row>
<el-col :span="12">
<el-form-item label="链路名称" prop="name">
<el-input
v-model="ruleForm.name"
placeholder="请输入链路名称"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="链路类型" prop="linkType">
<el-select
v-model="ruleForm.linkType"
placeholder="请选择链路类型"
clearable
>
<el-option
v-for="item in linkTypeList"
:key="item.val"
:label="item.key"
:value="item.val"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="链路走向" prop="go">
<el-row>
<el-col :span="10">
<el-select
v-model="ruleForm.srcNetwork"
placeholder="请选择"
clearable
@clear="clearSrc"
@change="srcChange"
>
<el-option
v-for="item in scrList"
:key="item.val"
:label="item.key"
:value="item.val"
></el-option>
</el-select>
</el-col>
<el-col :span="4">
<div >
<img
src="@/assets/toRight.png"
/>
</div>
</el-col>
<el-col :span="10">
<el-select
v-model="ruleForm.dstNetwork"
placeholder="请选择"
:clearable="false"
@clear="clearDst"
@change="dstChange"
>
<el-option
v-for="item in dstList"
:key="item.val"
:label="item.key"
:value="item.val"
></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物理位置" prop="physicalPosition">
<el-input
v-model="ruleForm.physicalPosition"
placeholder="请输入链路物理位置"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属机构" prop="orangeName">
<el-input
v-model="ruleForm.orangeName"
placeholder="例:xx市公安局"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="行政区编码" prop="organCode">
<el-input
v-model="ruleForm.organCode"
placeholder="请输入行政区编码,例:027"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="责任人" prop="dutyPerson">
<el-input
v-model="ruleForm.dutyPerson"
placeholder="请输入链路责任人"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="责任人电话" prop="dutyTel">
<el-input
v-model="ruleForm.dutyTel"
placeholder="请输入链路责任人电话"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="公安网邮箱" prop="dutyEmail">
<el-input
v-model="ruleForm.dutyEmail"
placeholder="请输入负责人公安网邮箱"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="链路IP地址" prop="ip">
<el-input
v-model="ruleForm.ip"
placeholder="请输入链路IP地址"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="链路端口" prop="port">
<el-input-number
placeholder="请输入链路端口"
type="text"
:min="0"
:controls="false"
v-model.trim="ruleForm.port"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="管理页面" prop="webUrl">
<el-input
v-model="ruleForm.webUrl"
placeholder="请输入链路管理页面"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :push="2">
<el-button
class="filter-item"
type="primary"
icon="el-icon-plus"
@click="saveForm"
v-show="$checkPermission(['Register_boundarySave'])"
>
保存
</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="itemBox">
<div class="headerTitle">链路拓扑图</div>
<el-form :model="tuopuForm" ref="tuopuForm" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="拓扑图" prop="fileName">
<el-input
v-model="tuopuForm.fileName"
placeholder="请选择电脑中拓扑图文件"
clearable
disabled
>
<el-upload
accept=".pdf, .doc, .docx"
action="string"
:limit="1"
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
:http-request="UploadFile"
slot="append"
:show-file-list="false"
>
<el-button
type="primary"
v-show="$checkPermission(['Register_tuotpUpload'])"
icon="el-icon-upload2"
>上传</el-button
>
</el-upload>
</el-input>
</el-form-item>
</el-col>
<el-col :span="3" :push="1">
<el-button
class="filter-item"
type="primary"
icon="el-icon-view"
@click="preview"
v-show="$checkPermission(['Register_tuotpPreview'])"
>
预览
</el-button>
</el-col>
</el-row>
</el-form>
</div>
<div class="itemBox">
<div class="headerTitle">设备信息列表</div>
<el-row type="flex" justify="end" >
<el-button
class="filter-item"
type="primary"
icon="el-icon-plus"
@click="addEquipment"
v-show="$checkPermission(['Register_equipmentAdd'])"
>
添加
</el-button>
</el-row>
<div>
<commonTable
:tableHead="tableHead"
:tableData="tableData"
:dataFiter="true"
:selectionFlag="false"
:dropdownList="[]"
:resizable="true"
:tableLoading="tableLoading"
:showListD="showListD"
:toolBoxFlag="false"
@sortChange="() => {}"
@selection-change="() => {}"
@selectAction="() => {}"
@addData="() => {}"
:actionFlag="false"
:actionList="[]"
:freeElfFlag="false"
:xuhaoFlag="true"
:freeWidth="480"
>
<template
slot-scope="scope"
slot="doSomething"
fixed="right"
align="left"
>
<el-button
icon="el-icon-edit"
type="primary"
@click="handlerUpdate(scope.rows)"
v-show="$checkPermission(['Register_equipmentEdit'])"
>编辑</el-button
>
<el-button
icon="el-icon-delete"
type="danger"
@click="handlerDelete(scope.rows)"
v-show="$checkPermission(['Register_equipmentDelete'])"
>删除</el-button
>
</template>
</commonTable>
</div>
</div>
<div class="itemBox">
<div class="headerTitle">链路注册</div>
<el-row type="flex" justify="end" >
<el-button
class="filter-item"
type="primary"
icon="el-icon-plus"
@click="addRegister"
v-show="$checkPermission(['Register_registerAdd'])"
>
添加
</el-button>
</el-row>
<div>
<commonTable
:tableHead="Register_tableHead"
:tableData="Register_tableData"
:dataFiter="true"
:selectionFlag="false"
:dropdownList="[]"
:resizable="true"
:tableLoading="Register_tableLoading"
:showListD="Register_showListD"
:toolBoxFlag="false"
@sortChange="() => {}"
@selection-change="() => {}"
@selectAction="() => {}"
@addData="() => {}"
:actionFlag="false"
:actionList="[]"
:freeElfFlag="false"
&nbs