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>