vue：处理base64格式文件pdf、图片预览

在Vue中，可以使用vue-pdf-signature组件来处理PDF文件，并且可以预览base64格式的PDF。以下是一个简单的例子：

1. 安装vue-pdf-signature组件：

npm install vue-pdf-signature --save

2. 在Vue组件中使用它来预览base64格式的PDF：

<template>
  <div>
    <vue-pdf-signature
      :file="pdfBase64"
      :url="pdfUrl"
      :scale="scale"
      @loaded="onPdfLoaded"
    ></vue-pdf-signature>
  </div>
</template>
 
<script>
import VuePdfSignature from 'vue-pdf-signature';
 
export default {
  components: {
    VuePdfSignature
  },
  data() {
    return {
      pdfBase64: '', // PDF文件的Base64字符串
      pdfUrl: '', // PDF文件的URL
      scale: 1.5, // 预览时的缩放比例
    };
  },
  methods: {
    onPdfLoaded(pdf) {
      // PDF加载完成后的处理
    }
  }
};
</script>

在这个例子中，:file属性绑定了一个PDF的Base64字符串，:scale属性用于控制PDF的缩放比例。当PDF加载完成后，你可以通过@loaded事件来进行进一步的处理。

对于图片预览，可以使用<img>标签直接显示base64格式的图片数据：

<template>
  <div>
    <img :src="imageBase64" alt="Image preview" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageBase64: 'data:image/png;base64,...' // 图片的Base64字符串
    };
  }
};
</script>

在这个例子中，:src属性绑定了图片的Base64字符串，<img>标签会自动将其作为图片进行显示。