blob文件流应该怎么嵌入

[YANGHAOHEHE]

对于pdf.js的viewer.html，可以在file后面加上：blob地址直接打开。但是这里的source直接使用形如“blob:https://localhost:3000/14a40765-3e26-44fd-805a-3dc2b7d959e8"的blob链接好像就不行。

[DingRui12138]

这个文件是怎么来的，input change 的？

[DingRui12138]

如果这是个本地文件的话，可以使用这个函数

function blobToDataURI(file) {
  return new Promise(resolve => {
    const reader = new FileReader()

    reader.onload = function (e) {
      resolve(e.target.result)
    }
    reader.readAsDataURL(file)
  })
}
// vue
...
data: {
  return {
    pdfSource: '',
  }
},
methods: {
  handleFileChanged(evt) {
    const file = evt.target.files[0]
    if (!file) return

    blobToDataURI(file).then(data => {
      this.pdfSource = data
    })
  }
}
...

tips: 如果是其他来源的话你再联系我，我会三天后关闭这个 issue

[YANGHAOHEHE]

就是从后台获取文件流，然后前端的接口大概是这样的： { url: url, params, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, responseType: 'arraybuffer', } 拿到文件流data后用下面的方式创建blob： const pdfBinaryData = []; pdfBinaryData.push(data); var pdfUrl = window.URL.createObjectURL(new Blob(pdfBinaryData, { type: 'application/pdf' })); 之前用pdf.js的时候，在viewer.html后加上'?file='这个pdfUrl就可以直接打开文件了，blob形如：'blob:localhost:3000/xxxxxxx'，在浏览器是可以直接打开的。

[DingRui12138]

这几天有点忙，抱歉哈。下面是我的使用方法，我这边一切正常。你参考一下？

// xx.vue method
fetch('http://localhost:3000/pdf', {
  headers: {
    'Content-Type': 'application/pdf',
  },
}).then(res => {
  const reader = res.body.getReader()
  const stream = new ReadableStream({
    start(controller) {
      function push() {
        reader.read().then(({ done, value }) => {
          if (done) {
            controller.close()
            return
          }

          controller.enqueue(value)
          push()
        })
      }

      push()
    },
  })

  const data = new Response(stream, {
    headers: { 'Content-Type': 'application/pdf' },
  })
  data.blob().then(blob => {
    blobToDataURI(blob).then(data => {
      this.pdfSource = data
    })
  })
})

// nodejs koa2
router.get("/pdf", async (ctx, next) => {
  const data = fs.readFileSync(path.join(__dirname, './test.pdf'))
  ctx.body = data;
})

[YANGHAOHEHE]

谢谢！没想到给出这么多方法！感激不尽！