Pdf预览功能实现（asp.net）

asp.net中使用

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="

outerContainer"

,viewer.js就是pdfjs的例子。

vue中的使用

//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;

    },