精华内容
下载资源
问答
  • vue-pdf-符号 vue.js pdf查看器 安装 npm install --save vue-pdf-sign 2020-07-10 npm 重新打包!!支持显示签章 by 张总监 朱总监 示例-基本 < pdf xss=removed></ pdf> < script > import pdf from ' vue-...
  • 但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了。本篇笔记循序渐...
  • 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历。有多少页就加载了多少个pdf组件。 2.pdf文件存在跨域问题,这个需要后端同学支持。 3.demo上的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预览pdf文件流

    2021-01-13 14:06:03
    vue中引入vue-pdf插件预览pdf文件流
  • vue-pdf-搜索查看器 当前分支有一个使用unpack lib以便在发布之前调试lib的示例。 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 项目...
  • npm install npm运行开发 输入
  • 主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue-pdf预览分页版

    2021-06-02 15:44:10
    pdf预览
  • java-vue-pdf 注意 此项目已废弃,有更好更快更便捷的解决方案 移步 目前此项目demo正在完善中,已上传时序图 解决场景 使用java生成动态数据的pdf文件 页尾有截图,一目了然 方案优点 纯vue编写,避免繁杂且不直观...
  • vue-pdf vue.js pdf查看器 安装 npm install --save vue-pdf 示例-基本 < pdf xss=removed></ pdf> < script > import pdf from ' vue-pdf ' export default { components : { pdf } } 演示版 待定:...
  • vue-pdf-demo

    2020-12-20 11:28:41
    vue-pdf-demo
  • vue-html2pdf将任何vue组件或元素转换为PDFvue-html2pdf基本上只是一个vue包装器,在后台使用 。 目录 。 在Nuxt.js中使用 道具 大事记@beforeDownload的示例用例 投币口 分页符 指导 浏览器 入门 NPM 使用...
  • vue-pdf.js-demo-master.zip

    2019-09-24 11:46:04
    vue引入pdf.js预览的demo事例,挺好用的一个例子,我亲自体验过的
  • 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

    展开全文
  • @import '~vue-pdf-reader/vue-pdf-reader.css' ; 其他方式: 该软件包可能会导致长时间使用webpack进行构建,因此您可以按以下方式导入此lib < head > ... < link rel =" stylesheet " type =" text/...
  • 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,出现文件打印乱码的问题…
    这个我目前还没遇到,等以后有空再更~~~

    展开全文
  • <script src="https://unpkg.com/vue-pdf-embed@1.0.4/dist/vue2-pdf-embed.js"></script> <script> const app = new Vue({ data() { return { news: {}, isLoading: true, page: 1, pageCount: 1, showAllPages: ...
    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <style>
            canvas {
                margin-bottom: 8px;
                box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
            }
    
            .app-header {
                padding: 16px;
                box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
                background-color: #555;
                color: #ddd;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
    
            .app-content {
                padding: 24px 16px;
            }
    
            .right {
                margin-bottom: 0;
            }
    
            .right input {
                margin-right: 5px;
            }
    
            .btn {
                margin: 0 5px;
            }
    
            .pages {
                display: flex;
                justify-content: center;
                align-items: center;
            }
    
            [v-cloak]{
                display: none;
            }
        </style>
    
    </head>
    
    <body id="page-top" class="landing-page no-skin-config">
    <div id="app">
        <div class="container xs-container">
            <div v-if="news.pdf">
                <div class="app-header">
                    <template v-if="isLoading">
                        Loading...
                    </template>
    
                    <template v-else>
                        <span v-if="showAllPages">
                            {{ pageCount }} page(s)
                        </span>
                        <span v-else>
                            <button class="btn" :disabled="page <= 1" @click="page--"></button>
                            {{ page }} / {{ pageCount }}
                            <button class="btn" :disabled="page >= pageCount" @click="page++"></button>
                        </span>
                        <label class="right"><input v-model="showAllPages" type="checkbox">显示所有页面</label>
                    </template>
                </div>
    
                <div class="app-content">
                    <vue-pdf-embed ref="pdfRef" :source="news.pdf" :page="page" @rendered="handleDocumentRender"/>
                </div>
                <div class="pages">
                    <span v-if="showAllPages">
                                {{ pageCount }} page(s)
                            </span>
                    <span v-else>
                        <button class="btn" :disabled="page <= 1" @click="page--"></button>
                        {{ page }} / {{ pageCount }}
                        <button class="btn" :disabled="page >= pageCount" @click="page++"></button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script src="/public/vue/vue2.js"></script>
    <script src="https://unpkg.com/vue-pdf-embed@1.0.4/dist/vue2-pdf-embed.js"></script>
    
    <script>
        const app = new Vue({
            data() {
                return {
                    news: {},
                    isLoading: true,
                    page: 1,
                    pageCount: 1,
                    showAllPages: false,
                }
            },
            components: {
                VuePdfEmbed: window.VuePdfEmbed,
            },
            watch: {
                showAllPages() {
                    this.page = this.showAllPages ? null : 1
                },
            },
            methods: {
                getNewsDetail() {
                    $.ajax({
                        url: `pdf 地址`,
                        success: (res) => {
                            this.news = res
                            document.title = res.title
                        }
                    })
                },
                handleDocumentRender() {
                    this.isLoading = false
                    this.pageCount = this.$refs.pdfRef.pageCount
                }
            },
            created() {
                this.getNewsDetail()
            }
        })
        app.$mount('#app')
    </script>
    
    </body>
    </html>
    
    展开全文
  • vue-pdf-signature

    2022-01-10 10:37:29
    width:100%"></pdf> </div> </el-dialog> </div> </template> <script> import pdf from 'vue-pdf-signature' import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory' // import getqueryReceipt...

    转载地址

    https://www.jianshu.com/p/999f790436b6
    
    https://blog.csdn.net/qq_45268602/article/details/122249818
    

    先下载

    yarn add vue-pdf-signature
    或者
    npm install --save vue-pdf-signature
    

    使用

    <template>
      <div>
        <el-button type="text" @click="dialogVisible = true"
          >点击打开 Dialog</el-button
        >
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <div v-for="(item, index) in links" :key="index" class="pdfdiv">
            <!-- <pdf :src="pdfUrl" v-for="i in numPages" :key="i" :page="i"></pdf> -->
            <pdf :src="item" id='pdf' ref="printPdf" style="display:inline-block;width:100%"></pdf>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    import pdf from 'vue-pdf-signature'
    import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'
    // import getqueryReceipt from '../services/getqueryReceipt' // 获取url的接口
    
    export default {
      components: {
        pdf
      },
      data() {
        return {
          dialogVisible: false,
          links: [],
          pdfList: []
        }
      },
      methods: {
        handleClose() {
          this.dialogVisible = false
          this.pdfList = []
          this.links = [] // 一定要清空,不然数组会一直添加内容
        },
        newFn() {
          const arr = this.pdfList
          for (var i = 0; i < arr.length; i++) {
            var src1 = arr[i]
            var aa = pdf.createLoadingTask({
              url: src1.link, // url:"",
              cMapPacked: true,
              CMapReaderFactory
            })
            this.links.push(aa)
          }
        },
        qurryPay(row) {
          this.dialogVisible = true
          this.infoCode = row.infoCode
          this.formId = row.loanID
          // getqueryReceipt(this.formID, this.infoCode).then(res => {
          //   if (res.success) {
          //     this.pdfList = res.content
          //     this.newFn()
          //   }
          // })
        }
      }
    }
    </script>
    
    <style></style>
    
    
    展开全文
  • vue-pdf 的使用示例 官方入口>>> github地址 vue版本: "vue": "^2.6.11" vue-pdf版本: "vue-pdf": "^4.2.0" 1、分页显示: <template> <pdf ref="pdf" :src="pdfUrl" :page="pageNum" :...
  • vue-pdf 预览乱码问题

    2021-08-30 22:29:55
    1、找到安装的依赖文件夹vue-pdf,把node_modules > vue-pdf > src > pdfjsWrapper.js替换为以下文件内容: import { PDFLinkService } from 'pdfjs-dist/es5/web/pdf_viewer'; var pendingOperation = ...
  • vue-pdf

    2020-12-29 11:42:19
    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 ...
  • 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 ...
  • 最近项目需求需要在vue中预览pdf文件,使用vue-pdf这个插件,并且还有许多方法、属性能进行功能扩展。 一、安装 npm install --save vue-pdf 二、基本示例 <template> <div class="pdf"> <pdf ...
  • vue pdf 预览下载功能 vue-pdf

    千次阅读 2021-04-05 15:32:10
    1. 下载 vue-pdf 插件 npm install --save vue-pdf 或者 cnpm install --save vue-pdf 2. 所需页面引入 vue-pdf 我的 pdf 预览是在弹窗中展示, 根据自己的项目实际情况来展示 <!-- 模板代码 --!> <div ...
  • vue中使用vue-layer+vue-pdf弹出框查看PDF,支持滚轮滚动 ctrl按住可缩放查看,输入页码跳转 先看效果图: 默认打开的弹出框 可自定义大小 可缩放弹框 全屏 缩放到左下角 下面教你使用 首先需要导入对应的插件 vue...
  • 项目前端框架 vue 使用vue-pdf 展示pdf 出现一下情况 <p><img alt="" height="658" src="https://img-ask.csdnimg.cn/upload/1608107985355.png" width="1106" /></p> 然后导致 浏览器别的页面也缺文字 甚至...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,687
精华内容 5,874
关键字:

vue-pdf

vue 订阅