精华内容
下载资源
问答
  • 最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径...
  • vue在线预览pdf文件

    2020-05-13 21:04:26
    实现步骤: npm install --save vue-pdf <template> ...pdf src="./static/relativity.pdf">.../pdf>...import pdf from 'vue-pdf' ... vue-pdf 是对 pdf.js 进行了进一步简化封装 参考h.

    实现步骤:

    • 引入依赖vue-pdf
    npm install --save vue-pdf
    • 使用方式 
    <template>
      <pdf src="./static/relativity.pdf"></pdf>
    </template>
    
    <script>
    import pdf from 'vue-pdf'
    
    export default {
      components: {
        pdf
      }
    }

    文章参考:https://my.oschina.net/u/3690153/blog/4277579 

    展开全文
  • vue-pdf预览pdf文件

    2021-01-13 14:06:03
    vue中引入vue-pdf插件预览pdf文件
  • 针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf....
  • 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf...
  • 前端预览pdf功能,后端返回文件流的形式 1 首先,下载vue-pdf npm install vue-pdf -D 2 其次,模板里面引入vue-pdf import pdf from ‘vue-pdf’ 3 html: <pdf :src="src"></pdf> 4 相关js: // ...

    前端预览pdf功能,后端返回文件流的形式

    1 首先,下载vue-pdf

    npm install vue-pdf -D

    2 其次,模板里面引入vue-pdf

    import pdf from ‘vue-pdf’

    3 html:

    <pdf :src="src"></pdf>
    

    4 相关js:

    // 初始化获取pdf文件
    getPdfCode (index) {
    	this.$set(this.loading, index, true) // iview的按钮懒加载
    	axios({
    		method: 'get',
    		url: process.env.VUE_APP_BASE_API + `/crm/crm/contract/preview/${this.contractID}`,
    		headers: {
    			'Content-Type': 'application/x-www-form-urlencoded',
    			'Authorization': 'Bearer ' + this.$util.getCookie('Admin-Token')
    		},
    		responseType: 'blob' //设置响应的数据类型为一个包含二进制数据的 Blob 对象,必须设置!!!
    	}).then(res => {
    		this.fileStream = res
    		this.src  = this.getObjectURL(res.data); // 将返回的数据流转换为url
    		this.previewContract = true
    		this.$set(this.loading, index, false)
    	})
    },
    
    // 将返回的流数据转换为url
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) { // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file);
        } catch (error) {
    
        }
      } else if (window.URL != undefined) { // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file);
        } catch (error) {
    
        }
      }
      return url;
    }
    

    完成以上几步就可以预览pdf

    实现下载pdf
    实现分页显示pdf

    展开全文
  • vue-在线预览pdf文件和下载(pdf.js)

    千次阅读 2019-09-25 17:47:06
    最近做项目遇到在线预览和下载pdf文件 试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径...

    最近做项目遇到在线预览和下载pdf文件
    试了多种pdf插件,例如jquery.media.js(ie无法直接浏览)
    最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果)
    强烈推荐该插件,以下介绍用法

    (1)下载插件

    下载路径:https://github.com/mozilla/pdf.js

    百度网盘下载
    链接:https://pan.baidu.com/s/1z4_o8ahN3JNifSnALbKLeg
    提取码:7efu

    (2)将下载构建后的插件放到文件中public(vue/cli 3.0)
    在这里插入图片描述
    (3)在vue文件中直接使用,贴上完整代码

    <template>
      <div class="wrap">
        <iframe :src="pSrc" width="100%" height="100%"></iframe>
      </div>
    </template>
    
    <script>
      export default {
        name: "pdf",
        data() {
          return {
            pSrc:'',
          };
        },
        methods: {
          loadPDF () {
            //baseurl :pdf存放的文件路径,可以是本地的,也可以是远程,这个是远程的,亲测可以用
            let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
            //ie有缓存加个随机数解决  + '?r=' + new Date()
            let pSrc = baseurl + '?r=' + new Date();
            this.pSrc = '../../plugin/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
          },
        },
    
        mounted: function() {
          this.loadPDF();
        }
    
      };
    </script>
    
    <style scoped>
    .wrap{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      bottom: 0;
    }
    </style>
    
    

    以下为我的项目的成功后的截图

    在这里插入图片描述

    展开全文
  • Vue中如何在线预览pdf文件

    千次阅读 2019-02-27 09:06:41
    某次项目的需求中要实现pdf文件在线预览,百度了很多个实现pdf在线预览的功能,感觉看起来都是比较费劲,可能自己比较菜吧,但是总结了一下可以实现这种结果的是pdf.js 可以去pdf.js的官网下载文件: mozilla....

    某次项目的需求中要实现pdf文件的在线预览,百度了很多个实现pdf在线预览的功能,感觉看起来都是比较费劲,可能自己比较菜吧,但是总结了一下可以实现这种结果的是pdf.js

    可以去pdf.js的官网下载文件: mozilla.github.io/pdf.js/gett… (官网地址)点开后选择稳定版本

    下载拿到pdf.js的文件入下图 主要需要的是下面两个文件

    在脚手架3中我们可以将文件夹放在public文件夹下面

    1.后台返回的是服务器的文件地址

    用这种方法打开

    2.如果后台返回的是文件流的格式

    ps:pdf.js是不支持跨域文件加载的 直接加载是不会成功的。会报 “file origin doesnot match viewer”错误。 所以我们得改变一下源码: ==>> 注销 viewer.js 的1565行即可

    主要思路是将后台返回的路径或者文件流引入viewer.html文件中

    展开全文
  • vue 实现pdf文件在线预览

    千次阅读 2021-06-08 16:29:39
    PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下 第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <template> <div> <pdf ref="pdf" v-...
  • 1.安装vue-pdf npm install --save vue-pdf 2.引入vue-pdf import pdf from "vue-pdf"; //注册组件 components: { pdf, } // 使用 <div class="content" ref="content"> <pdf ref="pdf" v-for="i in ...
  • Vue-pdf实现在线预览PDF文件

    千次阅读 2021-05-18 14:13:46
    在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现。 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径。 page...
  • vue项目中预览pdf文件

    千次阅读 2019-05-09 13:42:59
    一、利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf <iframe ref="mainiframe" :src="pdfUrl" style="height:100%;width:100%...
  • Vue PDF文件预览vue-pdf

    万次阅读 2018-09-14 18:30:00
    最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme ...
  • 浏览器在线预览文件,可能基于后端来做效果会更好,前端的话,预览pdf还行,其他就感觉一般了,甚至有的很难支持。本文之说pdf文件和docx文件的预览ps:图片预览就不说了哈,浏览器天然的支持 (=言归正传,其实借助...
  • }, mounted() { //实例化 this.pdfh5 = new Pdfh5("#demo", { pdfurl: "../../static/test.pdf"//这里就是pdf的路径,可以是本地的,也可以是服务器上的(https://eyepro.com/php_sqlsrv.pdf) });...
  • vue中简单使用vue-pdf预览pdf文件,解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 close-on-click-modal=false show-close=...
  • vue-pdf预览分页版

    2021-06-02 15:44:10
    pdf预览
  • vue预览本地pdf文件方法之vue-pdf组件

    千次阅读 2020-11-24 17:41:45
    npm install --save vue-pdf 2、页面引入 3、具体实现 <div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> <span @click="changePdfPage(0)" class="turn
  • 通过SpringBoot框架实现PDF在线预览,此项目只是简单的Demo个小实例,只提供参考,希望能给需要的朋友带来帮助。
  • 在H5页面内写一个在线预览PDF的功能,但是需要支持预览文件本身的水印。之前写过类似的功能使用插件“pdfjs-dist”但是改来改去水印就是显示不出来,最后采用"vue-pdf"插件,虽然也支持但是我们可以改。 安装 cnpm ...
  • vue使用pdf.js实现在线预览pdf文件

    千次阅读 2020-07-17 18:18:38
    vue使用pdf.js实现在线预览pdf文件1.到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download 下载pdfjs插件包,注意下载Stable稳定版的包。将下载的压缩包解压并放入项目中。2.使用方法3.出现问题 ...
  • 在office官方自带的链接后添加自己的文档链接,浏览器就可以自动解析预览 支持 word 、ppt、excel,不支持pdf格式文件 ...我们引入vue-pdf来在线预览pdf文件 文档地址 npm install --save vue-pdf <tem...
  • 主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前言最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了。在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf....

空空如也

空空如也

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

vue在线预览pdf文件

vue 订阅