一、后端返回pdf文件(url:http:xxx.pdf)时
引入库
代码如下（示例）：
npm install --save vue-pdf
1.页面使用
代码如下（示例）：
<div><pdf ref="pdf" :src="url"></pdf></div>
<script>import {Loading } from "element-ui";import pdf from 'vue-pdf'export default {components:{pdf},data(){return {url:"http://xxxx.pdf",}}</script>
提示：以上只能预览到文件第一页.
2、预览多页
<pdf ref="pdf"v-for="i in pdfPages":key="i":src="pdfUrl":page="i"></pdf>
<script>import pdf from 'vue-pdf'let loading;export default {components:{pdf},data(){return {pdfUrl:pdf.createLoadingTask("http://xxxxx.pdf"),pdfPages: null, // pdf 总页数}},mounted() {this.getPdfPages()},methods: {getPdfPages() {loading = Loading.service({//element加载loadinglock: true,text: "PDF文件加载中...",background: "rgba(0, 0, 0, 0)",});pdfUrl.promise.then(pdf => {this.pdfPages= pdf.numPagesloading.close();//关闭loading}).catch(err => {loading.close();//关闭loading})},}</script>
二、后端返回流文件(url不是pdf结尾)时
<pdf ref="pdf"v-for="i in pdfPages":key="i":src="src":page="i"></pdf>
<script>import {Loading } from "element-ui";import pdf from 'vue-pdf'import Axios from "axios";let loading;export default {components:{pdf},data(){return {src:'',pdfPages: null, // pdf 总页数}},created() {loading = Loading.service({lock: true,text: "PDF文件加载中...",background: "rgba(0, 0, 0, 0)",});this.getPdfCode ()}methods: {// 初始化获取pdf文件getPdfCode () {let that = this;Axios({method: 'get',url: this.doloadUrl,headers: {'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',},responseType: 'blob' //配置响应头}).then(response => {that.src = that.getObjectURL(response.data);}).catch(function (error) {console.log(error);});}// 将返回的流数据转换为urlgetObjectURL(file) {let url = null;url = window.webkitURL.createObjectURL(file);//多页let pdfUrl=pdf.createLoadingTask(url)pdfUrl.promise.then(pdf => {this.pdfPages= pdf.numPages}).catch(err => {console.log(err);})loading.close();//关闭loadingreturn url;}}</script>
总结
提示：以上代码仅供参考
另:word文件预览请移步–>docx文件预览(docx-preview插件简单使用)
