PDF.js未按正确的页面顺序显示

vue使用pdfjs-dist/legacy/build/pdf.js的时候

发现多页面的时候,下载是正确的,查询的时候,页面的顺序会发生变化,比如一共九页,可能第二页的位置是9,然后其余的没有问题

就是 1 9 2 3 4 5 6 7 8这种

然后发现

let renderContext = {

canvasContext: ctx,

viewport: viewport,

};

page.render(renderContext);

render渲染的顺序不是按照我们期望的那种渲染

所以用async + await解决

<div id="pdf-canvas"></div>

<script>

methods: {

getRuleInfo() {

PdfJs.getDocument({ url: getRuleFileUrl, withCredentials: true }).promise.then((pdf) => {

document.getElementById("pdf-canvas").innerHtml = "";

this.renderPages(pdf);

});

},

async renderPages(pdf) {

for (var i = 1; i <= pdf.numPages; i++) {

await pdf.getPage(i).then((page) => {

let canvasList = document.getElementById("pdf-canvas");

let canvas = document.createElement("canvas");

canvasList.appendChild(canvas);

let ctx = canvas.getContext("2d");

let dpr = window.devicePixelRatio || 1;

let ratio = dpr;

let viewport = page.getViewport({ scale: screen.availWidth / page.getViewport({ scale: 1 }).width });

canvas.width = viewport.width * ratio;

canvas.height = viewport.height * ratio;

canvas.style.width = viewport.width + "px";

canvas.style.height = viewport.height + "px";

ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

let renderContext = {

canvasContext: ctx,

viewport: viewport,

};

page.render(renderContext);

});

}

},

}

<script>

相关推荐
liangshanbo12152 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15884 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_5 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD5 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15886 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫6 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo6 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li7 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐7 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊8 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php