vue中集成pdfjs自定义分页
<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自定义分页的更多相关文章
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- vue中如何在自定义组件上使用v-model和.sync
自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model ...
- 在vue中使用weixin-js-sdk自定义微信分享效果
在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...
- vue中使用element-ui自定义主题后,vue-cli跑不起来了
环境:vue-cli 2.x版本 自己在官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢! ...
- vue中checkbox 样式自定义重写;循环遍历checkbox,拿到不同的v-model绑定值;及获取当前checked 状态,全选和全不选等功能。
开始写这个功能,不得不吐槽原始的checkbox,灰色小方块的丑陋,虽说eleUI,mintUI,等各种框架的单复选框已经对其优化,但还是不想要这种.那我们就来研究一下怎么处理它. <secti ...
- 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...
- Ionic2中集成腾讯Bugly之自定义插件
Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
随机推荐
- VS code自定义用户代码片段snippet
打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix 就是你自定义的快捷键 body 就是你自定义的代码片段 description 就是这 ...
- 谈谈你对spring的理解?
spring么,就是春天了.春天,动物.....不可描述的季节……你懂得!!! 希望这么说能把面试官逗乐吧. spring可以实现java模块化开发,贯穿表现层,业务层,逻辑层,实现了各个层之间的解耦 ...
- 从零开始学spring cloud(五) -------- 将服务注册到Eureka上
一.开发前准备工作: 官方文档地址:https://cloud.spring.io/spring-cloud-static/spring-cloud-netflix/2.1.0.RELEASE/mul ...
- MacbookPro下载word文件显示dms怎么办
方法:直接改扩展名!!!!!!!!!! 如果你下载的是word的话,把最后的扩展名.dms改成.doc就可以了. 同理,如果你下载的是rar的话,改成rar就好了.
- 11.20 正则表达式 断言(?=exp)
今天看源代码,研究了一下qz写的这个方法: // 添加逗号分隔,返回为字符串 comma: function(length) { ) length = ; var source = ('' + thi ...
- vue全局API
一.Vue.extend() 顾名思义 extend 继承,官方给出的解释是 (使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象.) Vue构造器是指 vue是一个构 ...
- scrapy项目对接Docker
1.项目根目录生成requirements.txt文件 命令pip freeze > requirements.txt 2.项目根目录新建Dockerfile文件,文件不加任何后缀名 内容如下 ...
- 炫酷MD风之dialog各种对话框
这个demo也是我从别人那里学来的,不是本人写的代码,我也是个MD初学者.把这个demo分享给看到的你,希望对你有帮助. 直接上图: demo地址:百度网盘:链接:https://pan.baidu. ...
- PowerDesigner反向生成PDM和name与注释互换
Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl 'the current model 'get the ...
- vue中v-model 与 v-bind:value
之前一直认为,v-model相当于下方代码的语法糖,如下: <h1>{{inputValue}}</h1> <input type="text" :v ...