Express framework nodejs

var express = require('express')
var app = express();
var fs = require('fs')
var http = require('http').createServer(app);
app.get('/send'.async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin'.The '*');
  function read () {
    return new Promise((resolve, rejects) = > {
      fs.readFile('./public/2020.jpg'.function(err, data) {
        resolve(data)
        rejects(err)
      })
    })
  }
  let data = await  read()
  res.send(data)
})
http.listen(3000.() = > {
  console.log('listening on *:3000'); }); app.get('/send'.async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin'.The '*');
  function read () {
    return new Promise((resolve, rejects) = > {
      fs.readFile('./public/2020.jpg'.function(err, data) {
      // You can change different files, pictures or documents, etc
        resolve(data)
        rejects(err)
      })
    })
  }
  let data = await  read()
  res.send(data)
})
http.listen(3000.() = > {
  console.log('listening on *:3000');
})
Copy the code

The front-end response was accepted using vUE scaffolding

<template>
  <div id="app">
    <img :src="src" alt="12">
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: ' '
    }
  },
  created () {
    function blobToDataURI (blob) {
  		return new Promise((resolve, reject) = > {
      	let reader = new FileReader()
      	reader.readAsDataURL(blob)//blob
      	reader.onload = function (e) {
          resolve(e.target.result)//base64
      }
  })
  }
fetch('http://localhost:3000/send').then(x= >x.blob())
.then(async res=>{
  var body = document.body

 await blobToDataURI(res).then(reu= > {
    this.src = reu // base64 displays images
  })
  //this.src = url.createObjecturl (res) Blob stream displays images
  console.log(URL.createObjectURL(res))
  var a = document.createElement('a')
  a.setAttribute('href', URL.createObjectURL(res))
  body.appendChild(a)
  //Blob {size: 50107, type: "application/octet-stream"}Res binary blob a.setAttribute('download'.'1.jpg') // 1.jpg is dynamically named according to the file type
  a.click()
})
  }
}
</script>
Copy the code

Lite version

function base (blob) {
      var read = new FileReader()
      read.readAsDataURL(blob)
      read.onload = function (x) {
        console.log(x.target.result)
        var body = document.body
      var a = document.createElement('a')
      a.setAttribute('download'.'1.pdf')
      a.setAttribute('href', x.target.result)
      body.appendChild(a)
      a.click()
      }
    }
    fetch('http://localhost:3000/send').then(x= > x.blob()).then(x= > {
      console.log(x)
      var body = document.body
      var a = document.createElement('a')
      // var url = window.URL.createObjectURL(new Blob([x]))
      base(new Blob([x]))
      // a.setAttribute('download', '1.pdf')
      // a.setAttribute('href', url)
      // body.appendChild(a)
      // a.click()
    })
Copy the code