标签：idt pre container query rip win 使用 1.5 end
1.pdf预览功能实现的插件是pdfjs-1.5.188-dist
//引入插件中相关的文件以及jquery文件 @section css{ <link rel="stylesheet" href="~/pdfjs-1.5.188-dist/web/viewer.css"> <script src="~/pdfjs-1.5.188-dist/web/compatibility.js"></script> <link rel="resource" type="application/l10n" href="~/pdfjs-1.5.188-dist/web/locale/locale.properties"> <script src="~/pdfjs-1.5.188-dist/web/l10n.js"></script> <script src="~/pdfjs-1.5.188-dist/build/pdf.js"></script> <script src="~/pdfjs-1.5.188-dist/web/debugger.js"></script> <script src="~/pdfjs-1.5.188-dist/web/viewer.js"></script> <script src="~/pdfjs-1.5.188-dist/build/pdf.worker.js"></script> } <div class="main"> @{Html.RenderPartial("preview_pdf");} </div> @section js{ <script> //页面加载的时候打开pdf文件 $(window).load(function () { PDFViewerApplication.open("../../files/building_1/1.pdf"); }); </script> }
里面引入的preview_pdf其实是，pdfjs-1.5.188-dist/web/viewer.html中提取出来的主体部分id="
//table上点击预览事件
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="previewInfo(scope.$index, scope.row)">预览</el-button>
</template>
</el-table-column>
//使用 iframe来显示pdf
<div v-show="isshowpdf" >
<el-button type="success" @click="backToList">返回</el-button>
<iframe :src="pdfurls" height="730" width="100%"></iframe>
</div>
previewInfo: function(index, row) {
if (index > 3 || index == 0) {
return this.$message("未找到对应的pdf文件！");
}
let url = "../../../uploads/123_" + index + ".pdf";
this.pdfurls = "/lib/pdf/web/viewer.html?file=" + url;
this.isshowpdf = true;
},
标签：idt pre container query rip win 使用 1.5 end
原文地址：https://www.cnblogs.com/xuqp/p/9707576.html
