Vue 移动端制作PDF预览

1.首先安装Vue-pdf

2.上级页面做跳转

javascript 复制代码
this.$router.push({
        path: "/preview",
        query: {
          id: item.chapter,
        },
});

3.预览页面代码

javascript 复制代码
<template>
  <div>
    <van-nav-bar title="在线预览" left-text="退出" left-arrow @click-left="onClickLeft" safe-area-inset-top placeholder />
    <div class="commonCenter build_matrix_box">
      <div class="slide-box">
        <div class="slide-box-item" v-for="i in numPages" :key="i">
          <pdf ref="pdf" :src="url" :page="i">
          </pdf>
          <div class="page_num_div">{{ i + " / " + numPages }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdf from "vue-pdf";
import { environment } from "../../../utils/environment.js";
import { getFileBase64, getFileBase64_1 } from "../../../api/auth.js";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      isIosPhone: false,
      url: null,
      numPages: null,
      displacement: {
        scale: 1,
      },
    };
  },
  mounted() {
    this.getNumPages();
    
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    getDistance(start, stop) {
      // Math.hypot()计算参数的平方根
      return Math.hypot(stop.x - start.x, stop.y - start.y);
    },
    getNumPages() {
      if (
        process.env.NODE_ENV === "development" 
      ) {

        getFileBase64_1(this.$route.query.id)
          .then((res) => {
            console.log("res", res);

            this.url = this.getObjectURL(res);
            console.log("url", this.url);

            let loadingTask = pdf.createLoadingTask(this.url);
            loadingTask.promise
              .then((pdf) => {
                console.log("numPages", pdf.numPages);
                this.numPages = pdf.numPages;
              })
              .catch((err) => {
                console.error("pdf 加载失败", err);
              });
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    // 将返回的流数据转换为url
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        console.log(1);
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        console.log(2);
        // webkit or chrome
        try {
          console.log(3);
          url = window.webkitURL.createObjectURL(file);
          console.log(url);
        } catch (error) {
          url = window.webkitURL.createObjectURL(file);
          console.log(4);
        }
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        console.log(5);
        try {
          console.log(6);
          url = window.URL.createObjectURL(file);
        } catch (error) {
          console.log(7);
        }
      }
      return url;
    },
    //其他文件的兼容 暂未使用
    handlePreview() {
      this.$http
        .post("/away-server/mobile-dc-system/file/base64", {
          fileId: this.$route.query.id,
        })
        .then((res) => {
          if (!res) {
            return;
          }
          switch (fileSuffix) {
            case ".pdf":
              this.$router.push({
                name: "PdfPreview",
                params: {
                  fileUrl: `data:application/pdf;base64,${res}`,
                  fileSuffix,
                },
              });
              break;
            case ".docx":
            case ".doc":
              this.$router.push({
                name: "WordPreview",
                params: {
                  fileUrl: `data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${res}`,
                  fileSuffix,
                },
              });
              break;
            case ".xlsx":
            case ".xls":
              this.$router.push({
                name: "XlsxPreview",
                params: {
                  fileUrl: `data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,${res}`,
                  fileSuffix,
                },
              });
              break;
            default:
              ImagePreview([`data:image/jpeg;base64,${res}`]);
              break;
          }
        })
        .catch((error) => {
          this.$toast(error);
        });
    },

  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-tab {
  color: #13b599;
  margin: 0 2px;
  border-bottom: 2px solid #d9d9d9 !important;
}

::v-deep .van-tab--active {
  font-weight: 900;
}

::v-deep.van-tab--active {
  font-weight: 900;
}

::v-deep .van-nav-bar__content {
  background: linear-gradient(#61d5a0, #1eb9b8);
}

::v-deep .van-nav-bar__title {
  color: #fff;
}

//修改文字颜色
::v-deep .van-nav-bar__text {
  color: #fff;
}

//修改箭头颜色
::v-deep .van-icon-arrow-left {
  color: #fff !important;
}

::v-deep .van-tabs__line {
  background-color: #1abc9c;
  width: 25%;
  height: 2px;
}

iframe {
  width: 100vw;
  background: #f5f5f9;
  height: calc(100vh - 46px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

iframe::-webkit-scrollbar {
  display: none;
}

.commonCenter {
  padding: 0;
}

.slide-box-item {
  position: relative;
}

.page_num_div {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  color: #000;
}
</style>
相关推荐
mCell18 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip18 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试