vue-pdf教程；前端pdf文件预览/pdf流文件预览

一、后端返回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插件简单使用)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！