vue预览PDF文件的几种方法

1.使用iframe标签预览PDF文件

1.1页面结构 html

 <iframe:src="fileUrl"id="iframeBox"ref="iframeRef"frameborder="0"style="width: 100%; height: 800px"></iframe>

1.2 js代码

export default {data() {return {fileUrl: "test.pdf", //文件路径};}
};

2.使用embed标签预览PDF文件

2.1页面结构 html

<embed:src="fileUrl"type="application/pdf"width="100%"height="800px"/>

2.2 js代码

export default {data() {return {fileUrl: "test.pdf", //文件路径};}
};

3.使用vue-pdf插件预览PDF文件

3.1 安装依赖

npm install vue-pdf

3.2 注册并引入组件

import pdf from "vue-pdf";
components: {pdf,},

3.3 使用组件展示PDF文件

 //html<divclass="pdf-box"><div class="pdf-tab"><div class="pdf-tab-button"><div class="btn-def btn-pre" @click.stop="prePage">上一页</div><div class="btn-def btn-next" @click.stop="nextPage">下一页</div><div class="btn-def" @click.stop="clock">顺时针</div><div class="btn-def" @click.stop="counterClock">逆时针</div></div><div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div><pdfref="pdf"class="pdf-preview":src="fileUrl":page="pageNum":rotate="pageRotate":style="{ height: customHeight + 'px' }"@num-pages="pageTotalNum = $event"@link-clicked="page = $event"></pdf></div>//jsexport default {data() {return {fileUrl: "", //文件路径pageNum: 1,pageTotalNum: 1,pageRotate: 0,customHeight: 400, // 自定义的PDF预览框高度};},components: {pdf,},computed: {//解决预览pdf文字丢失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie的问题pdfSrc() {//处理pdfUrl返回let src = pdf.createLoadingTask({url: this.fileUrl,//引入pdf.js字体，templcMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/",cMapPacked: true,});return src;},},methods: {//上一页prePage() {var p = this.pageNum;p = p > 1 ? p - 1 : this.pageTotalNum;this.pageNum = p;},// 下一页nextPage() {var p = this.pageNum;p = p < this.pageTotalNum ? p + 1 : 1;this.pageNum = p;},//顺时针clock() {this.pageRotate += 90;},//逆时针counterClock() {this.pageRotate -= 90;}  },
};
//css
.pdf-box {width: 100%;height: 800px;.pdf-tab {width: 100%;height: 800px;display: flex;flex-direction: column;align-items: center;.pdf-tab-button {width: 100%;display: flex;align-items: center;justify-content: space-around;.btn-def {width: 98px;height: 40px;line-height: 40px;text-align: center;color: #fff;background-color: #409eff;border-color: #409eff;border-radius: 5px;font-size: 18px;}}.page-size {width: 100%;display: flex;align-items: center;justify-content: center;font-size: 18px;}}
}