预览pdf及图片预览pdf预览图片

59 阅读 0 评论 39 点赞

我是靠谱客的博主温婉帽子，这篇文章主要介绍预览pdf及图片预览pdf预览图片，现在分享给大家，希望可以做个参考。

预览pdf

代码：

<template>
  <input type="file" @change="uploadFile" />
  <div v-if="state.file.length">
    <div v-for="(item, index) in state.file" :key="index">{{ item.name }}</div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      file: [],
    });
    const uploadFile = (e) => {
      // console.log(e.target.files[0]);
      if (!window.FileReader) return;
      let randerFile = new FileReader();
      randerFile.readAsDataURL(e.target.files[0]);
      randerFile.onload = (res) => {
        let objbuilder = "";
        objbuilder += '<object width="100%" height="100%" data="';
        objbuilder += res.target.result;
        objbuilder += ('" type="application/pdf" class="internal">');
        objbuilder += '<embed src="';
        objbuilder += res.target.result;
        objbuilder +=
          '" type="application/pdf"  />';
        objbuilder += "</object>";
        let win = window.open("#", "_blank");
        win.document.write(
          '<html><title>123</title><body style="margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px;">'
        );
        win.document.write(objbuilder);
        win.document.write("</body></html>");
      };
    };
    return {
      state,
      uploadFile,
    };
  },
};
</script>

<style>
</style>

预览图片

<template>
  <input type="file" @change="uploadFile" />
  <viewer :images="srcList" v-if="srcList.length">
    <img
      :key="index"
      v-for="(item, index) in srcList"
      :src="item"
      style="width: 128px; height: 128px"
    />
  </viewer>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
export default {
  setup() {
    // const state = reactive({
    //   srcList: [],
    // });
    const srcList = ref([])
    const uploadFile = (e) => {
      // console.log(e.target.files[0]);
      if (!window.FileReader) return;
      let randerFile = new FileReader();
      randerFile.readAsDataURL(e.target.files[0]);
      randerFile.onload = (res) => {
        if (!e.target.files[0].type.includes("image")) {
          let objbuilder = "";
          objbuilder += '<object width="100%" height="100%" data="';
          objbuilder += res.target.result;
          objbuilder += '" type="application/pdf" class="internal">';
          objbuilder += '<embed src="';
          objbuilder += res.target.result;
          objbuilder += '" type="application/pdf"  />';
          objbuilder += "</object>";
          let win = window.open("#", "_blank");
          win.document.write(
            '<html><title>123</title><body style="margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px;">'
          );
          win.document.write(objbuilder);
          win.document.write("</body></html>");
        } else {
          srcList.value= [res.target.result] 
        }
      };
    };
    return {
      srcList,
      uploadFile,
    };
  },
};
</script>

<style>
</style>