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>