2024-04-09 pdf.js实现文件转图片预览

SHEN_JIAMEI

已于 2024-05-06 15:39:58 修改

阅读量625

点赞数 4

文章标签： pdf elementui vue

于 2024-04-09 17:13:44 首次发布

本文链接：https://blog.csdn.net/SHEN_JAIMEI/article/details/137558824

版权

背景：已知后端给了pdf的url地址，可以在浏览器中直接打开预览；求如何在前端用图片的方式预览展示；

1、下载pdf.js：

vue2中直接下载最新版本可能会有问题，这里用的是2.2.228版本；

yarn add pdfjs-dist@2.2.228 -S

2、引入依赖：

import * as pdfjsLib from 'pdfjs-dist';

3、自定义文件转图片方法convertPdfToImage：

/**
 * pdf文件转图片
 * @param pdfUrl  文件路径
 */
export async function convertPdfToImage(pdfUrl) {
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const imageArr = [];

  // 循环遍历每一页pdf，将其转成图片
  for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {
    // 获取pdf页
    const page = await pdf.getPage(i);
    // 获取页的尺寸
    const viewport = page.getViewport({ scale: 2 });
    // 设置canvas的尺寸
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    // 将pdf页渲染到canvas上
    await page.render({ canvasContext: context, viewport: viewport }).promise;

    imageArr.push(canvas.toDataURL('image/png'));
  }

  return imageArr;
}

4、图片预览：

convertPdfToImage方法已经可以得到pdf转化的图片数组了，想怎么预览就自由发挥吧。

以下为ElementUI中 ElImageViewer组件预览方法。

import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

<el-image-viewer v-if="previewVisible" :on-close="handleClosePreview" :url-list="previewList" />

async handlePreview(pdfUrl) {
  this.previewList = await convertPdfToImage(pdfUrl);
  this.previewVisible = true;
}