精华内容
参与话题
问答
  • vue-pdf vue.js pdf viewer Install npm install --save vue-pdf Example - basic <template> <pdf src="./static/relativity.pdf"></pdf> </template> <script> import pdf from...
  • m try import vue-pdf in weback-simple vue template (standart config). And after compile - webpack create my 2 bundles (style.bundle and entry.bundle) and yet 168 bundles. Its only with vue-pdf, i`...
  • Vue-pdf预览插件-vue-pdf

    2020-04-30 17:52:35
    应用场景 在写H5项目的时候需要预览...步骤一:npm install --save vue-pdf 步骤二: 这是template。 <template> <div class="pdf" v-show="fileType === 'pdf'"> <pdf ref="pdf" :src="pdfUrl" ...

    应用场景

    在写H5项目的时候需要预览pdf文件

    解决方案

    步骤一:npm install --save vue-pdf

    步骤二: 这是template

    <template>
      <div class="pdf" v-show="fileType === 'pdf'">
        <pdf
          ref="pdf"
          :src="pdfUrl"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler">
        </pdf>
    
        <div class="bottom-btn" >
          <p class="arrow">
            <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
            {{currentPage}} / {{pageCount}}
            <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
          </p>
        </div>
      </div>
    
    </template>
    

    步骤三:这是js

    <script type='text/ecmascript-6'>
    import pdf from "vue-pdf";
    export default {
          components:{
          pdf
      },
      data() {
        return {
          pdfUrl:'',// pdf文件地址
          currentPage: 0, // pdf文件页码
          pageCount: 0, // pdf文件总页数
          fileType: 'pdf', // 文件类型
      } 
      },
      mounted(){
        const toast = this.$toast.loading({
          duration: 0,
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
        });
        //这里给pdfUrl赋值
        this.pdfUrl = "http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf";
    
      },
      methods:{
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        changePdfPage (val) {
          // console.log(val)
          if (val === 0 && this.currentPage > 1) {
            this.currentPage--
            // console.log(this.currentPage)
          }
          if (val === 1 && this.currentPage < this.pageCount) {
            this.currentPage++
            // console.log(this.currentPage)
          }
        },
        loadPdfHandler(e){
          this.$toast.clear();
          this.currentPage = 1 // 加载的时候先加载第一页
        }
      }
    };
    </script>
    

    步骤四: 这是css

    <style scoped>
      .pdf{
        position: relative;
      }
      .bottom-btn{
        position: fixed;
        width: 80%;
        bottom: 0;
        left: 10%;
        margin: 5% auto;
      }
    .arrow{
      text-align: center;
    }
    </style>
    

    好了,不出意外的话你现在应该可以在线预览pdf了!

    但是

    有些同学可能会遇到pdf跨域的问题,报错如下:
    Access to fetch at 'http://zlhjweb.5gzvip.idcfengye.com/fileManage/getFile?type=pdf&fileCode=a88dbe9d28ae447a9a37293bb1241ec8' from origin 'http://10.1.3.8:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

    这时候你可以这样做
    方法一:让后台配置跨域header,开放允许跨域。

    方法二:前端设置,我没试过不知道有没有用哈哈哈,你萌可以试试看 。

    created: {
        this.src = pdf.createLoadingTask(this. pdfUrl)
      }
    

    还有些同学需要打印pdf,出现文件打印乱码的问题…
    这个我目前还没遇到,等以后有空再更~~~

    展开全文
  • vue-pdf

    千次阅读 2018-11-09 14:29:17
    npm install vue-pdf --save 二、直接在要使用的页面中使用 &lt;template&gt; &lt;pdf src="./static/relativity.pdf"&gt;&lt;/pdf&gt; &lt;/template&gt; &lt;...

    一、集成

    npm install vue-pdf --save

    二、直接在要使用的页面中使用

    <template>
      <pdf src="./static/relativity.pdf"></pdf>
    </template>
    
    <script>
    import pdf from 'vue-pdf'
    
    export default {
      components: {
        pdf
      }
    }

    三、API详见官方文档

    vue-pdf API: https://www.npmjs.com/package/vue-pdf

    展开全文
  • pdfjs-vueDemo A Vue.js project Build Setup # install dependencies npm install # serve with hot reload at ...For a detailed explanation on how things work, check out the guide and docs for vue-loader.
  • 但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了。本篇笔记循序渐...
  • npm install --save vue-pdf 因为是在没有网络的内网开发,所以我是在外网安装的,安装好后拷贝了以下四个文件到项目的 node_modules step2: 点击翻页需求 template部分 <template> <div class="pdf...
    前言

    需要在页面在线阅读电子书

    步骤

    step1:

    安装

    npm install --save vue-pdf

    因为是在没有网络的内网开发,所以我是在外网安装的,安装好后拷贝了以下四个文件到项目的 node_modules

    在这里插入图片描述

    step2:

    点击翻页需求

    template部分

    <template>
      <div class="pdf">
        <p class="arrow">
        // 上一页
        <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
        {{currentPage}} / {{pageCount}}
        // 下一页
        <span @click="changePdfPage(1)" class="turn" :class="{grey:    			  currentPage==pageCount}">Next</span>
        </p>
        <pdf
          :src="src" // src需要展示的PDF地址
          :page="currentPage" // 当前展示的PDF页码
          @num-pages="pageCount=$event" // PDF文件总页码
          @page-loaded="currentPage=$event" // 一开始加载的页面
          @loaded="loadPdfHandler"> // 加载事件
        </pdf>
      </div>
    </template>
    

    script部分

    import pdf from 'vue-pdf'
      export default {
        components: {pdf},
        data () {
          return {
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            src: '/static/test1.pdf', // pdf文件地址
          }
        },  
        created: {    
        // 有时PDF文件地址会出现跨域的情况,这里最好处理一下    
        this.src = pdf.createLoadingTask(this.src)
      }
        method: {
          // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
          changePdfPage (val) {
            // console.log(val)
            if (val === 0 && this.currentPage > 1) {
              this.currentPage--
              // console.log(this.currentPage)
            }
            if (val === 1 && this.currentPage < this.pageCount) {
              this.currentPage++
              // console.log(this.currentPage)
            }
          },
    
          // pdf加载时
          loadPdfHandler (e) {
            this.currentPage = 1 // 加载的时候先加载第一页
          }
    
        }
      }
    
    

    滚动翻页需求

    template部分

    
    <template>
      <div class="pdf">
        <pdf
            v-for="currentPage in pageCount"
            :key="currentPage"
            :src="src"
            :page="currentPage"
            @loaded="loadPdfHandler"
          >
          </pdf>
      </div>
    </template>
    

    script部分

    import pdf from 'vue-pdf'
      export default {
        components: {pdf},
        data () {
          return {
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            src: '/static/test1.pdf', // pdf文件地址
          }
        },  
        created: {      
        this.src = pdf.createLoadingTask(this.src)
      }
        method: {
          loadPdfHandler (e) {
            this.currentPage = 1 // 加载的时候先加载第一页
            this.pageCount = this.bookPages[this.$route.query.book]
          }
    
        }
      }
    
    
    注意:如果pdf在本地,pdf需要放在public文件夹中,引用时不能使用相对路径,且‘/’即表示public文件夹(需略去public)

    如 src=" /public/static/book1.pdff" 这样就会报错如下,应该是src="/static/book1.pdf"
    在这里插入图片描述

    参考文章:https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html

    展开全文
  • Unexpected token: punc (,) [./~/vue-pdf/src/pdfjsWrapper.js:202,39][static/js/2.3a8ef70fd74efc910422.js:34939,45] [39m [22m [1m [31mERROR in static/js/vendor.b0af2abab73076654ac8.js from UglifyJs ...
  • <div><p>npm install --save vue-pdf, when import, makes error [eslint] Missing file extension "vue" for "vue-pdf" [import/extensions] <p>why?</p><p>该提问来源于开源项目:...
  • <ul><li>Machine and library details:<ul><li>vue-pdf 4.0.6</li><li>vue.js 2.3.3</li><li>webpack 2.6.1</li><li>browser chrome 70.0.3538.110</li><li>AWS EBS </li><li>Python 2.7 with Django 1.8</li></ul> ...
  • vue-pdf-master.zip

    2020-06-04 11:04:07
    基于vuepdf在线预览,可以直接启动使用,可以直接启动使用 完整项目 可启动查看页面点击操作,本人保证绝对好用,目前项目就在使用
  • 主要介绍了vue中使用vue-pdf的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue PDF文件预览vue-pdf

    万次阅读 热门讨论 2019-02-14 18:44:49
    npm install vue-pdf --save 二、直接在要使用的页面中使用 &lt;template&gt; &lt;pdf src="./static/relativity.pdf"&gt;&lt;/pdf&gt; &lt;/template&gt; &lt;...

    预览PDF实现方式:

    一、安装依赖

    npm install vue-pdf --save
    

    二、直接在要使用的页面中使用

    <template>
      <pdf src="./static/relativity.pdf"></pdf>
    </template>
    
    <script>
    import pdf from 'vue-pdf'
    
    export default {
      components: {
        pdf
      }
    }
    

    三、API详见官方文档

    vue-pdf API: https://github.com/FranckFreiburger/vue-pdf#readme

    展开全文
  • node_modules中: 更改内容: 在vue.config.js中:
  • 主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue-pdf.js-demo-master.zip

    2019-09-24 11:46:04
    vue引入pdf.js预览的demo事例,挺好用的一个例子,我亲自体验过的
  • VUE-PDF VUE的PDF预览组件

    千次阅读 2019-10-30 03:48:09
    VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template> <pdf src="./static/relativity.pdf"></pdf> </template> <script> ...
  • <div><p>google chrome console: Warning: Error during font loading: Font SimSun is not available I want to know how to generate SimSun.bcmap file through Windows`...FranckFreiburger/vue-pdf</p></div>

空空如也

1 2 3 4 5 ... 20
收藏数 800
精华内容 320
关键字:

vue-pdf

vue 订阅