vue:含有pdf内容的 'blob:adsd' 展示pdf内容

在Vue.js中，如果你有一个包含PDF内容的`blob:` URL，比如`blob:adsd`，你需要将这个二进制数据转换成浏览器能够渲染的格式，通常使用HTML5的`<object>`、`<embed>`元素，或者借助第三方库如Vue-PDFjs或vue-pdf等。

1. **使用`<object>`元素**:

<object data="data:application/pdf;base64," type="application/pdf">
  <p>你的PDF在这里无法显示，可能需要一个下载链接</p>
</object>

然后你可以使用Blob API将blob转成base64编码的数据：

const url = 'blob:adsd';
fetch(url)
  .then(response => response.blob())
  .then(blob => {
    const objectUrl = window.URL.createObjectURL(blob);
    document.querySelector('object').setAttribute('data', objectUrl);
  });

2. **使用`<embed>`元素**:
效果类似，只是语法略有不同：

<embed src="data:application/pdf;base64," type="application/pdf" />

同样的，也需要获取blob并设置src属性。

3. **利用第三方库**:
例如Vue-PDFjs，安装并引入后，可以这样展示PDF：

<template>
  <div>
    <pdfjs-viewer ref="pdfViewer" :src="pdfUrl"></pdfjs-viewer>
  </div>
</template>

<script>
import Vue from 'vue';
import PDFJS from 'pdfjs-dist';

export default {
  components: { PDFJSViewer: require('vue-pdfjs-viewer').default },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      fetch('blob:adsd')
        .then(res => res.arrayBuffer())
        .then(arrayBuffer => PDFJS.getDocument(arrayBuffer))
        .then(pdf => pdf.getPage(1)) // 获取第一页
        .then(page => page.getOperatorList())
        .then(operatorList => {
          this.pdfUrl = URL.createObjectURL(new Blob([operatorList], {type: 'application/pdf'}));
        });
    }
  }
};
</script>