zoukankan      html  css  js  c++  java
  • js将PDF转为base64格式,并在将base64格式PDF回显在页面中

    js将PDF转为base64格式

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <input type="file" onchange='handelChange(this)'>
    </body>
    </html>
    <script>
      function handelChange (e) {
        console.log(e.files)
        var file = new File(e.files,"r");
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          // base64格式PDF
          console.log(reader.result);
        };
        reader.onerror = function (error) {
          console.log('Error: ', error);
        };
      }
    </script>

    base64格式PDF回显在页面中

    <template>
      <div>
        <div>pdf转为base64,并回显</div>
        <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
      </div>
    </template>
    <script>
    // data为后端给的base64格式的pdf
    import { data } from "./tempData";
    import pdf from 'vue-pdf'
    // 解决部分文字不显示的问题
    import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
    export default {
      data () {
        return {
          src: '',
          numPages: 0,
          page: 1,
          currentPage: 0
        };
      },
      components: {
        pdf
      },
      methods: {
         getUrl () {
          return new Promise(resolve => {
            let da = data.fileGongjiao
            resolve(da)
          })
        },
      },
      mounted () {
        // 获取到base64的pdf
        this.getUrl()
          .then((da) => {
            let datas = 'data:application/pdf;base64,' + da
            this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
            this.src.promise.then(pdf => {
              this.numPages = pdf.numPages;
            });
          })
      }
    }
    </script>

    ******注:

    *****base64为去掉开头格式的base64 ,如‘JVBERi0xLjMNJeLjz9MNCjcgMCBvICAgICAgICAgICAgICAgICAgDQoyMSAwIG9.........................................(此处省略)’,

    *****不包含 'data:application/........................(此处省略)'

    参考 https://blog.csdn.net/yuanmengdage/article/details/111871993

  • 相关阅读:
    VMware-Fault-Tolerant Virtual Machine--论文翻译
    Mysql InnoDB存储引擎的锁相关
    深入理解JVM——读书笔记(虚拟机字节码执行引擎)
    Manacher算法
    The Google File System(论文阅读笔记)
    Java并发编程实践——读书笔记(一)
    MapReduce: Simplified Data Processing on Large Clusters
    二叉搜索树倒序O(nlogn)建树
    Day17
    Day16
  • 原文地址:https://www.cnblogs.com/-roc/p/14750732.html
Copyright © 2011-2022 走看看