vue
项目中需要对已上传得附件根据后台传回得url地址进行文件内容得预览读取并渲染。文件类型为pdf或word2种类型 1、word类型–.doc/.docx 安装插件：
npm i docx-preview@0.1.4 npm i jszip2、pdf类型
npm install --save vue-pdf3、页面中使用：
<template> <div class="essential"> <div class="cont-ess"> <div class="educate"> <div class="title-ess" style=""> <span style="margin-right:10px;">|</span> <span style="flex: 1;">目标责任书</span> <div> <el-button type="primary" plain size="small" @click="getFiles">重新上传</el-button> </div> </div> <div class="opsing scroll-bar" v-loading="loading"> <!-- word类型 --> <div ref="file" v-if="type==='.docx'||type==='.doc'&&show"></div> <!-- pdf文件 --> <div v-if="pdfUrl&&type==='.pdf'&&show"> <el-button-group v-if="pdfUrl&&type==='.pdf'&&show"> <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button> <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> <span style="marginTop: 10px;line-height:30px; color: #409EFF;margin-left:20px"> {{ pageNum }} / {{ pageTotalNum }} </span> </el-button-group> <pdf ref="pdf" :page="pageNum" :src="pdfUrl" @progress="loadedRatio = $event" @num-pages="pageTotalNum=$event" > </pdf> </div> </div> </div> </div> </div></template><script>// word文件import axios from 'axios'const docx = require('docx-preview');window.JSZip = require('jszip')// pdf文件import pdf from 'vue-pdf'export default { components: { pdf }, props:['uid','files'], data () { return { urls:process.env.VUE_APP_BASE_API, type:'', pdfUrl:'', pageNum: 1, // 总页数 pageTotalNum: 1, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了 loadedRatio: 0, show:false, loading:false, }; }, watch:{ uid(e){}, files(e){ this.choseFile() } }, mounted(){ this.choseFile() }, created(){ // 有时PDF文件地址会出现跨域的情况,这里最好处理一下 if(this.pdfUrl){ this.pdfUrl = pdf.createLoadingTask(this.pdfUrl) } }, methods: { // 上一页 prePage() { let page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一页 nextPage() { let page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, // 重新上传 getFiles(){ this.$emit('filList') }, // 附件读取 choseFile(){ if(this.files){ this.loading=true let name=this.files[0].name.substring(this.files[0].name.lastIndexOf(".")) this.type=name if(name===".docx"||name===".doc"){ axios({ method: 'get', responseType: 'blob', // 设置响应文件格式 url:this.urls+this.files[0].url, }).then(({data}) => { docx.renderAsync(data,this.$refs.file) // 渲染到页面预览 console.log(docx.renderAsync(data,this.$refs.file)) console.log(data) }) }else if(name===".pdf"){ this.pdfUrl=this.urls+this.files[0].url } this.show=true this.loading=false } }, }}</script><style lang='scss' scoped>::v-deep .docx-wrapper{ background: none !important;}::v-deep .docx{ line-height:30px !important; font-size: 18px !important;}::v-deep .annotationLayer{ font-size: 18px !important;}.cont-ess{ width: 100%; height: auto; padding-top:45px; .educate{ .title-ess{ color: rgba(64, 158, 255, 1); font-size: 20px; text-align: left; height: 35px; font-weight: bold; display: flex; border-bottom: 1px solid rgba(229, 229, 229, 1); } .opsing{ height: 900px; overflow: auto; padding: 30px 0px 30px 0px; } }}/** 滚动条样式修改*/.scroll-bar::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; height: 4px;}.scroll-bar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ background-color: #196fc5; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}.scroll-bar::-webkit-scrollbar-track { /*滚动条里面轨道*/ background-color: #dbe6f3; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em;}/** 滚动条样式修改*/</style>这里是我遇到自己查阅得方法记录。 pdf文件因为布置一页，所以也可以分页或者全部一页展示，这里只有分页展示。方法有很多，慢慢研究、、、、、 目前实现可以了，但是还有未知得问题，研究中、、、、
vue--纯前端预览pdf、word文件