<template>
<div id="div_read_area_scrool" class="no-scrollbar--x" :style="'text-align:center;height:'+ '500px;'+'overflow: auto;'">
<div id="div_read_area"></div>
</div>
</template> <script>
// 参数:the-document={}
// 属性:
import pdfjsLib from 'pdfjs-dist'
import $ from 'jquery'
export default {
name: 'ReadByPdf',
data () {
return {
theReadOnline: {
current: 1,
numPages: 0,
html: ''
}
}
},
methods: {
// 初始化pdfjs
initThePDFJSLIB: function () {
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
},
// 根据页码获取pdf内容
loadPDFForTheDocument (index) {
// 实例化pdfjs
pdfjsLib.getDocument("/static/110.pdf").then(pdf => {
// 通过页码获取每页内容
pdf.getPage(index).then(page => {
// 获得总页数
this.theReadOnline.numPages = pdf.numPages // 设置页面显示倍数 842×595
let _clientWidth = document.documentElement.clientWidth * 0.618
let view = _clientWidth % 842 > 0 ? 1.33 : 1 // 实例化画布
let canvas = document.createElement('canvas')
let context = canvas.getContext('2d') let dpr = window.devicePixelRatio || 1
let bsr = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1
let ratio = dpr / bsr let viewport = page.getViewport(view) canvas.width = viewport.width * ratio
canvas.height = viewport.height * ratio
// canvas.style.width = viewport.width + 'px'
// canvas.style.height = viewport.height + 'px' // context.setTransform(ratio, 0, 0, ratio, 0, 0) let renderContext = {
canvasContext: context,
viewport: viewport
} // 追加上新的一页空间
document.getElementById('div_read_area').appendChild(canvas) // 赋值上显示内容
page.render(renderContext).then(() => {
})
})
}).catch(err => {
console.log(err)
})
},
watchTheReadScroll: function () {
let _theVue = this // 获取节点
let _scrollContent = document.getElementById('div_read_area_scrool') // 绑定事件
_scrollContent.addEventListener('scroll', function () {
var viewH, contentH, scrollTop viewH = $(this).height()
contentH = $(this).get(0).scrollHeight
scrollTop = $(this).scrollTop() // 后期改成传递给父级
if (scrollTop / (contentH - viewH) >= 1) { // 到达底部时,加载新内容
_theVue.theReadOnline.current++
if (_theVue.theReadOnline.current <= _theVue.theReadOnline.numPages) {
_theVue.loadPDFForTheDocument(_theVue.theReadOnline.current)
}
}
})
}
},
mounted: function () {
this.initThePDFJSLIB()
this.watchTheReadScroll()
this.loadPDFForTheDocument(1)
}
}
</script>

vue中集成pdfjs自定义分页的更多相关文章

  1. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  2. vue中如何在自定义组件上使用v-model和.sync

    自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...

  3. 在vue中使用weixin-js-sdk自定义微信分享效果

    在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...

  4. vue中使用element-ui自定义主题后,vue-cli跑不起来了

    环境:vue-cli 2.x版本 自己在官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢! ...

  5. vue中checkbox 样式自定义重写;循环遍历checkbox,拿到不同的v-model绑定值;及获取当前checked 状态,全选和全不选等功能。

    开始写这个功能,不得不吐槽原始的checkbox,灰色小方块的丑陋,虽说eleUI,mintUI,等各种框架的单复选框已经对其优化,但还是不想要这种.那我们就来研究一下怎么处理它. <secti ...

  6. 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  7. Ionic2中集成腾讯Bugly之自定义插件

    Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...

  8. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  9. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

随机推荐

  1. VS code自定义用户代码片段snippet

    打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix   就是你自定义的快捷键 body    就是你自定义的代码片段 description 就是这 ...

  2. 谈谈你对spring的理解?

    spring么,就是春天了.春天,动物.....不可描述的季节……你懂得!!! 希望这么说能把面试官逗乐吧. spring可以实现java模块化开发,贯穿表现层,业务层,逻辑层,实现了各个层之间的解耦 ...

  3. 从零开始学spring cloud(五) -------- 将服务注册到Eureka上

    一.开发前准备工作: 官方文档地址:https://cloud.spring.io/spring-cloud-static/spring-cloud-netflix/2.1.0.RELEASE/mul ...

  4. MacbookPro下载word文件显示dms怎么办

    方法:直接改扩展名!!!!!!!!!! 如果你下载的是word的话,把最后的扩展名.dms改成.doc就可以了. 同理,如果你下载的是rar的话,改成rar就好了.

  5. 11.20 正则表达式 断言(?=exp)

    今天看源代码,研究了一下qz写的这个方法: // 添加逗号分隔,返回为字符串 comma: function(length) { ) length = ; var source = ('' + thi ...

  6. vue全局API

    一.Vue.extend() 顾名思义  extend  继承,官方给出的解释是   (使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象.) Vue构造器是指  vue是一个构 ...

  7. scrapy项目对接Docker

    1.项目根目录生成requirements.txt文件  命令pip freeze > requirements.txt 2.项目根目录新建Dockerfile文件,文件不加任何后缀名 内容如下 ...

  8. 炫酷MD风之dialog各种对话框

    这个demo也是我从别人那里学来的,不是本人写的代码,我也是个MD初学者.把这个demo分享给看到的你,希望对你有帮助. 直接上图: demo地址:百度网盘:链接:https://pan.baidu. ...

  9. PowerDesigner反向生成PDM和name与注释互换

    Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl 'the current model 'get the ...

  10. vue中v-model 与 v-bind:value

    之前一直认为,v-model相当于下方代码的语法糖,如下: <h1>{{inputValue}}</h1> <input type="text" :v ...