5. 测试滚动翻页功能确保正常工作 你可以通过在浏览器中打开你的Vue应用,并滚动PDF文档来测试滚动翻页功能。确保在滚动到底部时,页面能够正确翻页,并且没有出现错误或异常。 通过以上步骤,你应该能够在Vue项目中成功实现vue-pdf的滚动翻页功能。
numPages; }); }); // 更新当前页 const itemClcik = (index: number) => { emits('update:activePage', index + 1); }; .pdf-view-list { width: 183px; height: 100%; background-color: #333333; overflow-y: scroll; // 隐藏滚动条 &::-webkit-scrollbar { display: none; } .item...
} &::-webkit-scrollbar-thumb { background-color: #696969; /* 滚动条滑块颜色 */ border-radius: 1px; /* 滚动条滑块圆角 */ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 滚动条滑块阴影 */ } .vue-pdf-embed{ width: 100%; height: 100%; z-index: 1!important; } } } ...
记得操作第2步骤, 否则扩展出来很难看; x轴有滚动条完美截图成功!!! 3.最后再附上一张 每个属性的释义 pdf不分页
// 特别重要:当页面超过一页,出现滚动条,滚动的部分生成的图片为空白 window.pageYoffset = 0 document.documentElement.scrollTop = 0 document.body.scrollTop = 0 leturl = html2Canvas(document.querySelector(id)).then(function(canvas) { varcontentWidth = canvas.width ...
body.scrollLeft = 0; //获取滚动条的位置并赋值为0,因为是el-dialog弹框,并且内容较多出现了纵向的滚动条,截图出来的效果只能截取到视图窗口显示的部分,超出窗口部分则无法生成。所以先将滚动条置顶 const A4_WIDTH = 592.28; const A4_HEIGHT = 841.89; let imageWrapper = document.querySelector(".div") ...
添加watch方法,监听数据变量的变化,动态添加滚动条,一开始我代码如下: watch: { chatlog() { var container = this.$el.querySelector("#chatContainer"); console.log(container); container.scrollTop = container.scrollHeight; } } 但是发现滚动条都是滚动到倒数第二条数据上,所以需要如下代码来解决: watch...
当表格列数过多,表格内部产生滚动条,直接导出的话滚动条外是被截掉的,其实不管是表格还是其他组件,内部产生滚动条都是会被截掉的。 解决方案 1: 尽量不要产生内部滚动条,如果避免不了,那么可以考虑导出时候将样式更改,把宽度加大到不出现滚动条,同时可以考虑将页面方向换成横向,不然可能在 pdf 中字看起来过小。
监听pdf滚动,scrollTop滚动条高度,currentNum当前页码 backTop Function 监听回到顶部按钮的点击事件回调 zoomEnable Function(flag) 监听允许缩放,flag:true,false scrollEnable Function(flag) 监听允许滚动,flag:true,false show Function 监听pdfh5显示 hide
Vue.prototype.getPdf=function(nodeName, fileName, scale, style) {//导出之前先将滚动条置顶,不然会出现数据不全的现象window.pageYOffset = 0; document.documentElement.scrollTop= 0document.body.scrollTop= 0//loading提示信息this.$Message.config({top:500});vardownloadPdfMsg =this.$Message.loading(...