精华内容
下载资源
问答
  • Android 端本地预览 PDF 文件,使用 AS2.3.3 Gradle 4.1 下载下来可以直接编译运行,内部支持加载本地 File ,也可以加载一个 URL 类型的 PDF 文件,如果恰恰你的 APP 不想调用第三方软件的话 这个 DEMO 非常适合你...
  • 主要为大家详细介绍了vue实现在线预览pdf文件和下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 最近做项目,需要在项目中预览PDF文件,就百度了一下,找到了一个比较简单的方法 1、在官网上下载pdfjs文件 链接地址: http://mozilla.github.io/pdf.js/getting_started/#download 2、将下载的文件放在项目的...

    参考:https://blog.csdn.net/prey1025/article/details/90029284
    最近做项目,需要在项目中预览PDF文件,就百度了一下,找到了一个比较简单的方法

    1、在官网上下载pdfjs文件
    链接地址: http://mozilla.github.io/pdf.js/getting_started/#download
    2、将下载的文件放在项目的static文件夹中

    3、在需要浏览PDF的组件中写入
    pdfUrl在data中定义的,是pdf文件路径

    完成之后就可以预览pdf文件
    (这个是引入项目同目录的PDF文件)

    最近在做项目时,遇到甲方提的一个需求,就是实现点击图片实现在线预览PDF文档的功能。于是我就在网上找了很多关于PDF文档预览功能,现在将它们整理了一下。代码参考下图:

    引用了npm install --save vue-pdf

    template代码如下:

    <template>
        <div class="box_con BlockBg1">
          <div class="imgfm fml" @click="clickImg(1)"><img src="../../../assets/img/封面1.jpg"/></div>
          <div class="imgfm fmr" @click="clickImg(2)"><img src="../../../assets/img/封面2.jpg"/></div>
          <el-dialog :title="title" :visible.sync="dialogVisible" :fullscreen="true" center>
            <div class="box_con_scroll" @scroll="divScroll($event)">
              <pdf :src="src" v-show="false"
              :page="currentPage"
              @num-pages="pageCount=$event"
              @page-loaded="currentPage=$event"></pdf>
              <div v-for="i in pageCount" :key="i+'div'" class="containerDiv" :id="'containerDiv'+i">
                <pdf :key="i" :page="i" :src="src"></pdf>
              </div>
            </div>
          </el-dialog>
        </div>
    </template>
    js代码:

    <script>
    import pdf from 'vue-pdf'
    export default {
      components: {pdf},
      data() {
        return {
          src: "",
          dialogVisible: false,
          title:'',
          currentPage: 1, // pdf文件页码
          pageCount: 0, // pdf文件总页数
          numPages:0
        };
      },
      methods: {
        divScroll(ev){
        },
        clickImg(type){
          switch(type){
            case 1:
              this.previewPDF(this.$http.adornUrl('docfile/preview?fileId=111'));
              this.title = "中国核电2016-2018年总体经营和绩效对标报告";
              break;
            case 2:
              this.previewPDF(this.$http.adornUrl('docfile/preview?fileId=222'));
              this.title = "中国核电2019年总体经营和绩效对标报告合并版";
              break;
            default:
              break;
          }
          this.dialogVisible = true;
        },
        //预览pdf
        previewPDF(url) {
          this.src = pdf.createLoadingTask(url);
        },
      }
    };
    </script>
     

    展开全文
  • 无需安装任何软件,直接将pdfjs前端文件放到工程下,通过window.open写法直接引用pdfjs预览工具即可打开pdf文件。word文件可自行转为pdf文件后再通过该工具预览
  • Java web使用pdf.js在线预览远程服务器上的pdf文件,包里有pdf.js资源文件以及使用文档
  • vue 预览本地pdf文件

    千次阅读 2020-09-01 19:28:01
    新窗口预览pdf文件等,直接使用a标签即可(word文档直接下载...项目中遇到的问题是,预览放在项目中本地pdf,无论如何都显示不出pdf的内容。后来发现,要预览的文件要放在public下, 使用绝对路径加载就可以了。 ...

    新窗口预览pdf文件等,直接使用a标签即可(word文档直接下载),

    项目中遇到的问题是,预览放在项目中的本地pdf,无论如何都显示不出pdf的内容。后来发现,要预览的文件要放在根目录的public下,

    使用绝对路径加载就可以了。

    <a target="_blank" href="/pdf/xxx.pdf">相关论文</a>

    以上是开发环境使用

    打包的话要把路径改成/dist/pdf.xxx.pdf

    展开全文
  • 国外的款Web项目帮助浏览器在线预览pdf插件。解压后放入tomcat,再把pdf文件放入文件目录即可。访问地址为http://127.0.0.1:8080/ViewerJS/#../ViewerJS/test/test.pdf 127.0.0.1是本地ip,8080是tomcat端口,...
  • 最近项目中需要使用在线预览pdf,并要能实现自动播放,我想这样的需求无论如何来说都是很操蛋的 由于本人水平有限,最后讨论将项目需求改成将pdf下载到本地再实现自动播放。 接下来总结下目前能够实现pdf阅读的方案...
  • vue项目中实现pdf文件预览功能

    万次阅读 2019-08-09 18:21:55
    最近遇到一个实现pdf文件预览功能的需求,分享一下实现方法: pdf预览相对word、excel、ppt等文件的预览比较容易,因为常见的浏览器都是支持pdf文件直接预览,所以最简单的实现方法就是在浏览器直接输入pdf文件...

    vue项目中实现pdf文件预览功能

    最近遇到一个实现pdf文件预览功能的需求,分享一下实现方法:

    pdf预览相对word、excel、ppt等文件的预览比较容易,因为常见的浏览器都是支持pdf文件直接预览,所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览;

    1、使用浏览器默认支持访问pdf文件的功能

    1.1、当后端返回的是pdf文件在服务器上的路径时,直接访问该路径即可

    1.2、当后端返回的是pdf文件流时,直接访问文件流接口时,浏览器会默认下载该pdf文件,此时需要对该接口的响应头进行设置,具体如下:

    Content-Disposition: inline;filename=<pdf的文件名>
    Content-Type: application/pdf;charset=UTF-8
    

    Content-Disposition有两个值:attachment和inline,attachment表示下载文件,inline表示内嵌显示;

    上面设置的目的就是告诉浏览器,当前接口返回的文件流是pdf格式,且需要内嵌显示,也就是告诉浏览器不要下载文件,应该预览。

    这样当我们调用后端接口,后端返回pdf文件流时就可以直接在浏览器上访问;

    2、使用PDF.js进行预览

    PDF.js是mozilla开源的一个可以解析、预览pdf文件的插件,它本身提供了预览页面方便我们直接传入pdf文件地址进行预览,具体使用如下:

    在这里插入图片描述

    • 2、解压下载好的PDF.js插件

    • 3、在vue项目根目录下创建static文件夹用于存放静态资源(已存在则不需要重复创建),在static下新建名称pdf文件夹并将解压后的pdf.js文件放在该目录中

    在这里插入图片描述

    • 4、webpack配置将static文件夹下的静态资源复制到dist目录下,这样开启本地服务或上线后可以访问到静态资源

    • 4.1、安装copy-webpack-plugin插件

    npm install -D copy-webpack-plugin
    
    • 4.2、在webpack配置文件中引入:
    const CopyPlugin = require('copy-webpack-plugin');
    
    module.exports = {
      ...
      plugins: [
        new CopyPlugin([
          { 
          	from: path.resolve(__dirname, './static'),
          	to: path.resolve(__dirname, './dist/static'),
          	ignore: ['.*']
          }
        ]),
      ],
      ...
    };
    
    • 5、在vue文件中使用pdf.js提供的预览页面来预览pdf文件

    在这里插入图片描述
    我们就是利用viewier.html文件来进行pdf文件的预览。

    window.open(`/static/pdf/web/viewer.html?file=${pdfFileUrl}`);
    

    使用上面代码就可以新开页预览pdf文件,就是使用viewer.html通过传入文件地址来进行预览,pdfFileUrl为pdf文件存放服务器的地址

    Q&A:

    1、PDF.js是一个开源的插件,为什么不使用npm install方式安装?

    因为需求比较简单,只要预览就可以,对预览页面涨什么样没有要求,所以采用PDF.js提供的预览页面也就是viewer.html来实现预览是最省事的。npm上关于PDF.js的包有两个分别是pdfjs和pdfjs-dist,其中pdfjs-dist的下载量比pdfjs的多,通过npm install安装pdfjs和pdfjs-dist后可以发现其文件中均没有viewer.html(如下图所示),所以无法使用PDF.js提供的预览页面来预览。那使用pdfjs和pdfjs-dist的是如何预览的?它们负责提供解析pdf文件,并将解析内容输出来,预览的话需要自己来写一个预览页面,对于对pdf预览页面有特殊定制需求的话可以使用该方法;

    在这里插入图片描述
    在这里插入图片描述
    2、为什么要使用copy-webpack-plugin插件将静态资源复制一份到dist目录下?

    我们在本地启动项目后,通过localhost:8080访问时,其实就是访问webpack-dev-server上的静态资源,webpack会自动打包项目代码并将打包后代码放在webpack-dev-server上,也就是使用dist下的资源作为静态资源,因此,无论是开启本地服务还是上线之后,我们都需要将PDF.js的文件作为静态资源放在服务器上;而copy-webpack-plugin插件可以很方便的帮助我们将静态资源放在dist目录下。

    可能会遇到的问题:
    2.1、在使用copy-webpack-plugin插件时,需要注意由于copy-webpack-plugin插件版本与webpack版本不兼容带来的问题。
    我们项目使用的webpack版本是3.x版本的,如果安装最新的copy-webpack-plugin插件也就是5.x版本的,会出现如下报错:

    TypeError: Cannot read property 'emit' of undefined at CopyPlugin.apply
    在这里插入图片描述
    解决办法:
    对于webpack 3.x版本的,推荐安装copy-webpack-plugin 4.x版本的,这样就不会出现版本兼容问题,亲测有效。

    3、在使用viewer.html预览时,当传入pdf文件地址时报如下错误:

    在这里插入图片描述
    这是由于pdf.js不支持跨域请求,才报的错:file origin does not match viewer’s

    解决办法:

    简单粗暴的方法就是把viewer.js的判断远程地址的代码注释掉即可
    在viewer.js文件中找到如下判断,注释即可:

    // if (origin !== viewerOrigin && protocol !== 'blob:') {
    //   throw new Error('file origin does not match viewer\'s');
    // }
    
    展开全文
  • vue预览本地PDF

    千次阅读 2020-09-21 17:32:18
    data() { return { dialogVisible: false, src: “…/…/…/static/xxxxxxx.pdf”, // pdf文件地址 }; },
    展开全文
  •   最近开发项目时有个需求是在线预览 PDF 文件,然后百度了好久选出来一个功能比较强大并且好用的插件 PDF.JS,GitHub 下载地址(不知道最近咋了每次都想唠一会水一会)差点忘了说了,本文主要是讲使用过程的...
  • 背景最近项目中有需求需要在前端上传pdf文件并进行预览,上传功能比较简单。而pdf预览的话,在网上对比插件后,确定使用pdf.js插件进行pdf的展示。官网地址:[http://mozilla.github.io/pdf.js/]代码实现将pdf...
  • 最某项目需要做一个申报的页面,需要预览本地的pdf和视频 使用require引入静态文件时,发现视频和图片等的引入都没问题,但是引入pdf就开始报错. 不能使用 require(’@/assets/pdf/xxx.pdf’) 于是将pdf文件放在了...
  • }, mounted() { //实例化 this.pdfh5 = new Pdfh5("#demo", { pdfurl: "../../static/test.pdf"//这里就是pdf的路径,可以是本地的,也可以是服务器上的(https://eyepro.com/php_sqlsrv.pdf) });...
  • vue项目中使用pdf.js预览pdf文件

    万次阅读 2018-07-17 12:37:25
    项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己起了解了一下,最后决定用pdf.js, 但是发现,在vue使用这很少!!!!!所以我就写这篇帮助一下vue使用pdfjs的朋友! 其实 这和前端...
  • 使用vue-pdf预览pdf文件

    2021-08-13 14:51:28
    本地预览的话,如果是使用cli/3,需要把pdf文件放到 public 文件下,新建一个 static 文件夹,放入其中 使用 安装 vue-pdf 只能使用绝对路径,而且 / 就表示 public 文件夹,所以需要忽略掉,如下 <pdf src...
  • 目录下载代码修改 ...在web目录下新建一个index.html文件 <body> <button class="download">下载pdf</button> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">&l...
  • uniapp H5文件预览PDF预览

    千次阅读 2021-04-13 11:36:12
    2.解压,拷贝build和web目录到你的项目目录下 3. 使用pdf.js时,当有跨域的问题时,会加载失败,错误信息为file origin does not match viewer's。 修改起来简单粗暴。 直接注释掉web/viewer.js的以下代码...
  • 最近遇到一个需求 在公司开发的un-app项目中 需要展示后端给的pdf地址进行预览 , 预览完成需要连接上甲方的惠普打印机进行打印 目前这个功能已经开发完成 本篇文章主要是记录如何在线预览pdf 1.第一步 入口 第一步...
  • div class="pdf" style="height:100vh"> <iframe width="100%" height="100%" scrolling="no" style="border:none" :src="src" ></iframe> </div> </template> <script> ...
  • React-PDF 帮你在 React 应用展示 PDF 文件
  • 前端在线预览PDF文件

    2021-10-10 16:58:15
    需求:在vue3.x项目中预览pdf文件 提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐,vue3.x需要斟酌) 2.Pdf.js:该插件推荐通过其中提供的viewer.html直接展示,优点,...
  • 一个文件的下载地址,例如七牛云外链: (文件上传到七牛云仓库即可) 运行FileConventerApplication,启动项目,访问地址为:localhost:(端口号)/fileConventer?filePath= 转换规则 图片不进行转换
  • 1、在iframe预览pdf标签: <iframe :src="url"//绑定data的url frameborder="0" width="100%" height="100%" ...当地址来自本地上传的文件时需要加一个上传按钮,这里用element-ui里面的upload
  • 项目需求 预览的是本地pdf文件 template标签代码: <template> <div class="app-container"> <div> <pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></pdf>...
  • Java后台实现pdf文件在浏览器中预览

    万次阅读 2019-06-05 17:50:36
    放在服务器的pdf文件不能通过完整路径访问,想要实现的效果是浏览器访问后台接口可以预览pdf文件,暂时是把pdf文件放在本地测试 通过输出流的方式将pdf文件输出 1.项目中使用Spring+SpringBoot+Mybatis 2.工具类 /** ...
  • 项目中需要前端来解析.zip\ .image\ .pdf预览图像,并且需要在图形上绘制。所以我的整体解决方法是,在解析生成的图形的基础上,覆盖层 Canvas。 zip 使用了 jszip 直接将其中的图片取出来 image 可以直接使用...
  • 接着上篇的博客,在搜索出手机内的.pdf格式文件后,实现pdf文件预览的方式有很多, 1.Android PdfViewer项目地址:https://github.com/barteksc/AndroidPdfViewer 功能很强大, 使用也比较广, 亲测可以使用. 唯一...
  • 前端项目中预览pdf文件, 提示:自己的笔记还在修改 、vue-pdf 1.安装 代码如下(示例): npm install --save vue-pdf 2.页面结构 代码如下(示例): <template> <div> <pdf ref="pdf" :...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,423
精华内容 2,169
关键字:

一个项目中预览本地pdf文件