码迷,mamicode.com
首页 > Web开发 > 详细

Pdf预览功能实现(asp.net)

时间:2018-09-26 17:06:53      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:idt   pre   container   query   rip   win   使用   1.5   end   

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;
    },

  

Pdf预览功能实现(asp.net)

标签:idt   pre   container   query   rip   win   使用   1.5   end   

原文地址:https://www.cnblogs.com/xuqp/p/9707576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!