精华内容
下载资源
问答
  • vue-pdf 预览pdf格式文件

    千次阅读 2019-08-15 13:46:39
    需求:预览pdf格式文件 实现: 一 安装 npm install --save vue-pdf 二 引入 import pdf from 'vue-pdf' // 哪个组件用到 在那个里面引入即可 <div class="form"> <p class="arrow" v-if=...

    需求:预览pdf格式的文件

    实现:

    一 安装

    npm install --save vue-pdf

    二 引入

    import pdf from 'vue-pdf' // 哪个组件用到 在那个里面引入即可
    
           <div class="form">
              <p class="arrow" v-if="pageTotalNum>1">
                <el-button :type="pageNum>1?'primary':'info'" @click.stop="prePage" >上一页</el-button>
                {{pageNum}}/{{pageTotalNum}} //pageNum 当前页 ,pageTotalNum 总页数
                <el-button :type="pageNum<pageTotalNum?'primary':'info'" @click.stop="nextPage" >下一页</el-button>
              </p>
              <pdf class="pdf"
                   ref="pdf"
                   :page="pageNum"
                   @num-pages="pageTotalNum=$event"
                   @link-clicked="page = $event"
                   :src="pdfUrl">
              </pdf>
            </div>
     export default {
        name: "viewAnswerCard",
        components:{papersBg,pdf},
        data(){
          return{
            pdfUrl: '',
            pageNum:1,
            pageTotalNum:1
          }
        },
        created() {
          this.getData();
        },
        methods: {
            //这里的文档地址是接口返回的
          getData(){
            this.$axios.get(dealUrl).then((res)=>{
              this.pdfUrl = res.data.data.path;
            }).catch()
          },
          prePage(){
            if(this.pageNum>1){
              var p = this.pageNum
              p = p>1?p-1:this.pageTotalNum
              this.pageNum = p
            }
          },
          nextPage(){
            if(this.pageNum<this.pageTotalNum){
              let  p = this.pageNum
              p = p<this.pageTotalNum?p+1:1
              this.pageNum = p
            }
          }
        }
      }

     

    展开全文
  • vue项目中使用pdf.js预览pdf文件

    万次阅读 多人点赞 2018-05-02 20:44:06
    项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs的朋友! 其实 这和前端...

        项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js,

    但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs的朋友!

    其实 这和前端框架无关的,直接使用pdf.js原生

         搜多了你就发现有几个封装pdf.js的vue组件,个人试验了其中一个,效果不是很好,所以,当然啊,用原生

    的是最好的啦!

       首先肯定是导入插件,我是从官网直接下载,链接:点击打开链接,注意放在static文件目录下,

    这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译,基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下,整个文件放在static目录下的不好地方就是打包会很大哟(当然你可以选择性的删除里面的文件,比如绝大部分语言包)。目录结构放一下

    其实就可以直接用的,网上很多,viewer.js 里的

     

    代表着文件路径,如果你项目中有个pdf文件,那直接相对路径就可以在页面预览,如果使用远程预览,其实这里的路径会被覆盖,你删不删除它自带的路径都不会影响你的远程预览,so我今天说的是远程预览(服务器端url预览),pdf.js也提供了一种方法,

    用file= 的方式也可以打开哟,放在页面上使用,我是iframe进行嵌套

        用这种方式必不可少的是跨域问题,你存储文件的服务器路径会和项目产生跨域,我的解决办法是,让后台返回流的形式返回文件,后台代码案例:

     

    注意:

     

    1    pdf.js是不支持跨域文件加载的  直接加载是不会成功的。会报  “file origin doesnot match viewer”错误。 所以我们得改变一下源码

    把这句警告直接注释就行了

     

    2    file参数中默认只允许传简单路径比如:http://www.a.com/file.php.  如果你要浏览的pdf路径为http://www.a.com/file.php?id=2001。 这时候直接传入的话会解析出错, 因为pdf.js无法判断id=2001是viewer.html的参数呢还是file.php的参数

     这告诉我们 url必须进行encode编码  把参数file后传入的动态参数中特殊字符转义:

    这里又会有两种方法:

    encodeURI() 把字符串编码为 URI
    encodeURIComponent() 把字符串编码为 URI 组件

    发现        encodeURI不会对:/?&等uri中起分割作用的字符进行编码;

    encodeURIComponent则会。

    所以必须选择 encodeURIComponent 进行对url的编码

    举例

    这样如此就ok

     

    3  

    如果 后台返回给前台的流的url形式 是

    https://xxx.com/api/esm/v1/contractTemplates/load?id=13&access_token=a33e14ef6aba87b593b1aac31e3d97bb

     

    这样pdf.js插件是无法识别的,所以的在最后加上 &.pdf  来骗过插件

    效果图

    上面是pc端的,移动端也同样试用,这里以微信为例,ios可以用自带的微信浏览器来进行pdf的预览,而安卓则必须用pdf.js来预览pdf咯,分辨ios与安卓的方法,我的博客里有哟!谢谢观看,一起交流进步!

    当然这是用iframe打开的,我这里也提供一种不是iframe打开的样式,因为pdf.js本质上是用canvas渲染的,我也是借鉴了他人的代码,具体我也忘了,放一下demo效果,(注意查看服务器返回流,token会失效,你测试的时候会报错,我只是告诉你怎么写而已,谢谢)

    最后补上demo链接 :vue-pdf.js-demo

    如果对你有所帮助的话,欢迎star! 谢谢

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • vue预览本地pdf文件方法之iframe

    千次阅读 2020-11-24 18:01:32
    1、vue预览本地pdf文件方法之a标签 2、vue预览本地pdf文件方法之vue-pdf组件 都不符合需求想要的效果 方法1只是重新打开窗口,适用于pdf预览简单需求 方法2因为是单页展现,还需要上一页下一页的切换,也不合适 ...

    之前试了两种方法

    1、vue预览本地pdf文件方法之a标签

    2、vue预览本地pdf文件方法之vue-pdf组件

    都不符合需求想要的效果

    方法1只是重新打开窗口,适用于pdf预览简单需求

    方法2因为是单页展现,还需要上一页下一页的切换,也不合适

    最后我试了一下iframe刚好满足我的需求

    废话不多说,直接上代码:

    最核心一句代码

    只需要一句代码

    <iframe :src="pdfSrc"  frameborder="0" width="100%" height="100%" ></iframe>

    预览效果还自带下载打印功能

    完整代码

    <template>
        <div>
            <div style="text-align: left;">
            <H2>行业资料</H2>
            <el-divider>
            </el-divider>
            <el-container>
                <el-aside width="300px" style="border: 1px solid #eee;height: 1000px; background-color: #D3DCE6;">
                    <div class="myTree">
                    <el-tree default-expand-all :props="defaultProps" :data="tableData"  @node-click="handleNodeClick"></el-tree>
                    </div>
                </el-aside>
                <el-container  style="border: 1px solid #eee;margin-left: 10px;">
                    <iframe :src="pdfSrc"  frameborder="0" width="100%" height="100%" ></iframe>
                </el-container>
            </el-container>
            </div>
        </div>
    </template>
    
    <script>
    
      export default {
        name: "IndustryInformation",
        data(){
          return {
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: 'pdf', // 文件类型
            pdfSrc: '',  // pdf文件地址
            defaultProps: {
              children: 'children',
              label: 'name'
            },
    
            tableData: [{
              id: 1,
              name: '道路工程资料',
              children:[
                {
                  id: 2,
                  name: '公路工程资料编制概述',
                  children:[
                    {
                      id: 21,
                      name: '路面工程部分分项划分表',
                      src: '/1.pdf',
                    },
                    {
                      id: 13,
                      name: '一般建设项目单位工程划分表',
                      src: '/2.pdf',
                    },
                    {
                      id: 14,
                      name: '路基工程部分分项划分表',
                      src: '/3.pdf',
                    },
                    {
                      id: 33,
                      name: '桥梁工程部分分项划分表',
                      src: '/4.pdf',
                    },
                    {
                      id: 34,
                      name: '隧道工程部分分项划分表',
                      src: '/5.pdf',
                    }
                  ]
                },
                {
                  id: 3,
                  name: '公路工程竣工资料',
                  children:[
                    {
                      id: 7,
                      name: '公路工程竣工文件编排层次',
                      src: '/5.pdf',
                    },
                    {
                      id: 8,
                      name: '工程洽商记录表',
                      src: '/4.pdf',
                    },
                    {
                      id: 9,
                      name: '工程设计表更、洽商一览表',
                      src: '/3.pdf',
                    }
                  ]
                }
              ]}]
          }
        },
        methods:{
          handleNodeClick(data) {
            this.pdfSrc = data.src;
          }
    
        }
      }
    </script>
    
    <style scoped>
        .myTree /deep/ .el-tree {
            position: relative;
            cursor: default;
            color: #606266;
            background-color: #D3DCE6;
        }
    </style>
    

    最终效果

     

    展开全文
  • 一、PDF pdf文件在线预览,直接通过&lt;a&gt;标签即可打开,实现在线预览 &lt;a target='_black' href='url.pdf'&gt;  

    一、PDF

    pdf文件在线预览,直接通过<a>标签即可打开,实现在线预览

    <a target='_black' href='url.pdf'>

     

    展开全文
  • js在线预览pdf文件

    千次阅读 2017-09-12 17:48:03
    js在线预览PDF文件  一、效果预览 二、实现代码: js图片在线预览 //预览PDF文件 function preViewPDF(obj){ var fileUrl=$(obj).attr("fileUrl"); var title=$(obj).attr("title")...
  • jquery.media在线预览pdf文件

    千次下载 热门讨论 2013-11-18 16:15:10
    jquery.media在线预览pdf文件
  • 预览PDF文件 - PDF.js

    千次阅读 2019-03-21 14:23:14
    网上找到很多前端实现文件预览方法,但...这是一个开源的js库,直接将PDF文件渲染成canvas,PDF.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支...
  • 利用 pdf.js 实现在前端预览 .pdf 文件

    万次阅读 2019-10-14 09:35:18
    1)pdf 转成 base64 编码方法,filePath 指定文件路径 2)base64 编码转成 pdf 方法 3)前端 HTML 文件,利用 iframe ,指定 src 的路径 4)Js文件,这边可能需要根据自身的实际情况改动 5. 效果图: 6. 缺陷: ...
  • Android加载预览PDF文件

    千次阅读 2017-10-20 11:32:44
    Android加载预览PDF文件
  • Vue - element-ui 中预览 word 、exce、ppt以及pdf文件

    万次阅读 多人点赞 2019-08-17 16:21:01
    最近写了个有 预览word 、Exce、ppt以及pdf文件 的后台 管理 在网上也找了 很多 就感觉很复杂 ,当然最后还是实现了 , 本博主一项喜欢简单 越简单越好 越好理解 废话不多说 先上效果图 (我就喜欢那种有图的代码 能...
  • 浏览器在线预览文件,可能基于后端来做效果会更好,前端的话,预览pdf还行,其他就感觉一般了,甚至有的很难支持。 本文之说pdf文件和docx文件的预览 ps:图片预览就不说了哈,浏览器天然的支持 (= 言归正传,其实...
  • 在线预览pdf文件(pdfJS)

    万次阅读 2019-04-18 14:42:56
    在线预览pdf文件(pdfJS) 刚进公司实习第一天,组长就让我自己去实现在线展示PDF文件,看了看网上贴子也比较了一下pdfObiect(感兴趣的可以看看),最终决定用pdf.js来实现预览功能。 使用pdfjs目的是为了打开pdf...
  • vue-pdf 通过文件流预览pdf文件

    万次阅读 热门讨论 2019-07-15 17:39:59
    而后端不想去处理跨域情况,所以后面就考虑到使用文件流的形式去处理。 首先,下载vue-pdf npm install vue-pdf -D 其次,模板里面引入vue-pdf import pdf from 'vue-pdf' html: <pdf :src="src"></...
  • 通过pdf.js预览PDF文件

    千次阅读 2018-08-09 11:05:40
    1、预览PDF文件前段页面demo 下载js插件(官网有api可以看看的),http://mozilla.github.io/pdf.js/ &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;&lt;/meta&...
  • pdf.js预览pdf文件

    千次阅读 2017-11-23 15:42:53
    项目中需要做一个office在线预览的功能,所以用到了pdf.js 下载对应官方文件, 然后 预览 嗯,这样就可以了 期间遇到一个比较坑的问题,就是Chrome下面死活出不来,报错如下: Unexpected server ...
  • jsp在线预览pdf文件

    千次阅读 2018-03-27 16:25:28
    最近项目中要实现pdf的在线预览,网上找了很多资料,实现起来都有些麻烦,偶然间发现一个插件,可以非常方便地实现pdf文件的在线预览。这里记录一下,方便日后查阅。插件:PDFObject下载地址:...
  • 在浏览器中预览pdf文件和Word文件,下载完这些插件,导入到自己项目中,至于导入到哪个目录,web.xml中需要配置什么,在下载的文档中有具体的文档说明,按照文档中的步骤去配置就好了! 我们先看看效果图:后面直接...
  • 1、pdf文件放在public文件下 2、a标签 a的样式可以根据需求自己设置,在此只简单说明问题 <a target="_blank" href="/1.pdf">相关论文</a> 同样的a标签如果换成word文档,则是下载效果 <a ...
  • demo源码地址:...1.修改pdf_viewer.css里红色框内的css,改变三脚图形的 2.在pdf_outline_viewer.js中124行加上 toggler.className = 'outlineItemToggler outlineItemsHidden'; ...
  • pdf格式文件预览,使用pdf.js

    千次阅读 2017-12-29 12:41:33
    Java做pdf预览,我使用pdf.js进行的预览 ...在文档中有两种方式,一种是pdf文件直接进行预览,另外一种是base64格式进行预览的。 我文件存储的地方是阿里云的oss,所以文件地址是一个链接。pdf.js预览文件直接给链接地
  • 是关于pdf和ofd格式文件预览和下载,浏览器不支持预览ofd格式文件,只能下载。 1、首先声明,upload组件是不支持显示pdf和ofd文件格式的缩略图的【这里使用业务解决,让设计给一个pdf和ofd的模板图片,当上传的...
  • 一个链接以pdf为后缀,但是点击打开是pdfjs框架下的预览,java语言怎么实现直接下载这个pdf文件,求~~
  • 照抄例子:... 1、npm安装 npm install --save vue-pdf 2、页面引入 ...div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> <span @click="changePdfPage(0)" class="turn
  • jsp页面实现移动端预览pdf文件

    千次阅读 2019-01-31 17:16:25
    手机端预览显示pdf文件 需求:后台传递到前端页面的pdf文件路径、pdf.js文件、pdf.worker.js文件。这两个插件网上资源挺多,自行查找。 以下是实现预览功能的jsp页面的代码 &amp;lt;%@ page language=&quot;...
  • 首先下载源码。把他放在自己的文件里面。 下载地址稍后放上。 然后<...</iframe>...我使用的vue所以直接在页面上把src写上了。...file加上pdf的地址,(这个pdf的地址是存在服务器的pdf文件地址,你...
  • 在office官方自带的链接后添加自己的文档链接,浏览器就可以自动解析预览 支持 word 、ppt、excel,不支持pdf格式文件 ...我们引入vue-pdf来在线预览pdf文件 文档地址 npm install --save vue-pdf <tem...
  • 微信小程序在线预览PDF格式文件

    千次阅读 2020-10-20 16:34:02
    当初开发这个功能时,网上一堆说苹果和安卓平台不一样,代码不一样,亲测一套代码安卓和苹果都可以打开预览,完全没问题,安卓也没有提示下载,改改传参直接用 wxml <web-view src="{{reportUrl}}" wx:if="{{...
  • PDF文件在线预览之pdf.js

    千次阅读 2017-08-07 16:21:50
    概述 pdf.js在是一个很成熟的技术了,网上也...文件测试预览 版本:stable(v1.7.225) 下载后的压缩包解压后包含web和build两个文件夹。在iis下添加网站,指定物理路径并配置完成后。在浏览器中打开web文件夹下view
  • 工作中需要完成一个PDF在线预览的功能,最简单的方法还是使用pdf的插件。 1、首先下载插件 链接:https://pan.baidu.com/s/1q4zuHrmjJL9QSEn2Iy5O9Q 提取码:4fcu 下载后直接解压出一个文件夹,将文件夹放入你...
  • html页面在线预览PDF文件

    万次阅读 2018-07-24 20:34:22
    依赖:jquery.media.js,自行百度下载 ...pdf_preview"&gt;&lt;/div&gt; 以上静态页面还需要引入js文件和依赖 &lt;script src="#springUrl('/static/js/sys/test.js')"&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,910
精华内容 10,764
关键字:

带预览格式的pdf文件