<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. IDEA中MAVEN项目Dependency not found 问题

    STEP1: 更新IDEA保存的仓库索引.操作步骤File->Setting->Maven->Repositories->Update.dependecy not found问 ...

  2. Harbor私有镜像仓库(上)

    上图配置为工作环境 特别注意:win10现在不允许使用私有ca证书,到时登录浏览器会失败,可以选用火狐浏览器. 创建自己的CA证书 openssl req -newkey rsa:4096 -node ...

  3. Java框架spring Boot学习笔记(八):@PropertySource,@Value注解

    获取配置文件 忽略配置文件不存在时报错

  4. eclipse-jee-kepler 如何设置编译compiler为1.8

    最新下载了jdk1.8,想在eclipse里面用一下 jdk1.8的新特性 但是,貌似eclipse(eclipse-jee-kepler-SR2-win32-x86_64.zip)最高的编译级别为: ...

  5. mysql mycat 中间件安装与使用

    一,什么是mycat 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务.ACID.可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵的Oracle集群 一 ...

  6. python异常捕捉以及处理

    看标题觉得高大上,好像能处理所有的异常.但是,事实是只能按照字面的意思来理解这一段话. 众所周知写代码哪有不出bug的? 那么出现了bug 我们不想让程序因为bug的存在而退出.那么要怎么做呢? 今天 ...

  7. vim常用配置 vimrc文件

    自从接触vim,自己瞎鼓捣.vimrc也有一段时间了.收集记录一下好用的配置. 一.奇技淫巧 1.折叠代码 折叠代码常常用在代码块较长的情况下,比如一个文件里定义了很多个函数,或者注释.括号影响的阅读 ...

  8. 独立安装CentOS7.4全记录

    大学用了四年的笔记本快用废了,闲来想着用来装个centos,当个服务器也行,于是装上了CentOS6.9系统,由于最小化安装,而且在安装时没有安装wpa_supplicant包,笔记本本身网卡接口又坏 ...

  9. 19-04【mysql】transaction,autocommit

    本地使用mysql测试结果如下, 没有使用start transaction的情况下: 如果set autocommit=1,则每一条语句默认提交: 如果set autocommit=0,则这条语句默 ...

  10. Saving custom fields in production order

    In additional data screen 1.PPCO0012->EXIT_SAPLCOKO1_001->ZXCO1U11 ​ ​ ci_aufk-zxxx = i_caufvd ...