On the mobile end, using pdfjs dist 4. x version, how to use H5 on the mobile end, users can freely zoom in and view (double-click, other gesture operations), and how to write the code

[yw8820]

On the mobile end, using pdfjs dist 4. x version, how to use H5 on the mobile end, users can freely zoom in and view (double-click, other gesture operations), and how to write the code

const renderPage = (num: any) => {
pdfDoc.getPage(num).then((page: any) => {
page.cleanup();
const canvas: any = document.getElementById(pdf-canvas-${num});
if (canvas) {
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
const ratio = dpr / bsr;
const viewport = page.getViewport({ scale: pdfScale.value });
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);
const renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
if (num < pdfPages.value) {
renderPage(num + 1);
} else {
loading.value = false;
}
}
});
};

const loadFile = async (url: any) => {
// 设定pdfjs的 workerSrc 参数
loading.value = true;
PDFJS.GlobalWorkerOptions.workerSrc = pdfWorker;
const loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(async (pdf: any) => {
pdfDoc = pdf; // 保存加载的pdf文件流
pdfPages.value = pdfDoc.numPages; // 获取pdf文件的总页数
await nextTick(() => {
renderPage(1); // 将pdf文件内容渲染到canvas
});
});
};