@develop-plugins/pdf-preview v0.0.3

PDF-Preview

简介

PDF预览组件，支持在线预览PDF文件。

安装

npm install @develop-plugins/pdf-preview

引用

import { PDFPreviewInstall } from '@develop-plugins/pdf-preview';
import '@develop-plugins/pdf-preview/style.css';

app.use(PDFPreviewInstall);

属性

Watermark 配置

示例

1、属性fileUrl为string类型

<template>
  <PDFPreview :fileUrl="url"/>
</template>

<script setup>
import { ref } from 'vue';

// 在线地址或本地地址
const url = ref('/example.pdf');
// base64地址
const url = ref('data:application/pdf;base64,...');
</script>

2、属性fileUrl为Uint8Array|Blob类型

<template>
  <PDFPreview :fileUrl="base64FileURL"/>
</template>

<script setup>
import { ref } from 'vue';
    
const base64FileURL = ref('');

fetch('/api/file/')
  .then((res) => res.arrayBuffer())
  // .then((res) => res.blob())
  // .then((res) => res.bytes())
  .then((arrayBuffer) => {
    base64FileURL.value = arrayBuffer;
  })
  .catch((err) => {
    console.log(err);
  });
</script>

3、属性fileUrl为Object类型

<template>
  <PDFPreview :fileUrl="fileUrl"/>
</template>

<script setup>
import { ref } from 'vue';

const fileUrl = ref({
    url: '', // 请求地址
    data: '', // 渲染的数据，如果url和data都有值，以data数据为准
    httpHeaders: {}, // 发送请求头配置
    withCredentials: false // 是否发送认证信息
});
</script>

事件