pdf流内容在线预览和下载

pdf文件预览

• https://www.npmjs.com/package/pdfjs-dist
• https://github.com/mozilla/pdf.js
• 点击以下链接下载web/viewer.html包（注：本人使用git下载无法预览）
• https://mozilla.github.io/pdf.js/getting_started/#download

<template>
  <div class="about">
    <iframe v-if="pdf" :src="pdf"  style="width:100%; height:800px; border:1px solid #eee"></iframe>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pdf:'',
    }
  },
  created:function(){
    this.viewPdf()
  },
  methods: {
    viewPdf() {
      let _this = this
      let url = "http://localhost:8080/document/pdf.pdf";
      let req = new XMLHttpRequest();
          req.open("GET", url, true);
          req.responseType = "blob";
          req.onload = function () {

            let blob = new Blob([req.response], { type: "text/plain" });
            let createObjectURL = URL.createObjectURL(blob)
            let url = `pdfjs-2.13.216-legacy-dist/web6/viewer.html?file=${createObjectURL}`
            _this.$set(_this,'pdf',url)
           }
          req.send();
    },

  }
}
</script>

pdf流内容文件下载

DownloadPdf(fileName) {
  let url = "http://localhost:8080/document/pdf.pdf";
  let req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.responseType = "blob";
    req.onload = function () {
     // var blob = new Blob([req.response], { type: "application/octetstream" });
      let blob = new Blob([req.response], {type: 'text/plain'});
      var isIE = false || !!document.documentMode;
      if (isIE) {
          window.navigator.msSaveBlob(blob, fileName);
      } else {
        var url = window.URL || window.webkitURL;
        var link = url.createObjectURL(blob);
        var a = document.createElement("a");
        a.setAttribute("download", fileName);
        a.setAttribute("href", link);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    };
    req.send();
},

读取文件内容并显示

reader() {
  let _this = this
  let url = "http://localhost:8080/document/txt.txt";
  let req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.responseType = "blob";
    req.onload = function () {

      let blob = new Blob([req.response], { type: "text/plain" });

      let reader = new FileReader();
        reader.readAsText(blob)
        reader.onload = function() {
          _this.text = reader.result
        };
     }
    req.send();
},

读取文件内容并下载

DownloadText() {
  let _this = this
  let url = "http://localhost:8080/document/txt.txt";
  // let url = "http://localhost:8080/document/pdf.pdf";
  let req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.responseType = "blob";
    req.onload = function () {

      let blob = new Blob([req.response], { type: "text/plain" });
      let link = document.createElement('a');
          link.download = 'hello.txt';
          link.href = URL.createObjectURL(blob);
          link.click();
          // URL.revokeObjectURL(link.href);
     }
    req.send();
  
},

将文本内容保存到本地

DownloadText2() {
  let string = this.value
  let blob = new Blob([string], { type: "text/plain" });
  let link = document.createElement('a');
    link.download = 'hello.txt';
    link.href = URL.createObjectURL(blob);
    link.click();
},

本地图片通过流内容回显

DownloadImage() {
  let _this = this
  let url = "http://localhost:8080/document/image.png";
  let req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.responseType = "blob";
    req.onload = function () {
      let blob = new Blob([req.response], { type: "text/plain" });
      let link = document.createElement('a');
        link.download = 'hello.png';
        link.href = URL.createObjectURL(blob);
        link.click();
        _this.image = link.href
        // URL.revokeObjectURL(link.href);
        console.log(link.href)
     }
    req.send();
  
},