@pluve/pdf-preview-vue

magic 系列之 PDF 预览组件

usage

• 默认将 PDF 文档渲染到 A4 尺寸的画布上，如果需要自定义尺寸，可以通过preferWidth和preferHeight来设置，同时需要设置scale来调整缩放比例。
• 需要提供 PDF 文档的 URL 地址，同时需要提供 PDF 文档的 CMap 地址，CMap 资源可以通过pdfjs-dist的cmaps目录下的文件来获取，例如：cmaps/Adobe-Japan1-UCS2.bcmap。你可以将 CMap 资源放到你的 OSS 上，然后通过cMapUrl来指定 CMap 资源的地址。
• 暂时仅支持渲染 PDF 文档第一页，后续会支持渲染多页。

<template>
  <PDFPreview v-bind="pdfProps" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { PDFPreview } from '.';

const pdfProps = reactive({
  pdfUrl: '',
  cMapUrl: '',
  scale: 1.335,
  preferWidth: 794,
  preferHeight: 1123,
});
</script>

<style lang="less" module>
.wrap {
  position: relative;
  min-height: 52px;
  background-color: #fff;
  padding: 10px 10px 0;
  border-radius: 4px;
  margin-top: 10px;
}
</style>

dependencies

• pdfjs-dist