vue3中将base64的pdf文件流转换成pdf并预览（三）——base64数据转pdf & pdf工具栏不显示 & vue3-seamless-scroll组件的使用-事件捕获 & 给接口追加数据

vue3中将base64的pdf文件流转换成pdf并预览（三）——接口base64数据转pdf的处理&pdf工具栏不显示 & vue3-seamless-scroll组件的使用-事件捕获 &给接口追加数据1、效果pdf详细版2、代码核心代码1、pdf工具栏不显示:src="zbUrl+'#toolbar=0'"2、接口中base64的处理1、接口接口名称接口地址接口释义文件

viceen

2746人浏览 · 2021-11-30 14:49:29

viceen · 2021-11-30 14:49:29 发布

vue3中将base64的pdf文件流转换成pdf并预览（三）——接口base64数据转pdf的处理 & pdf工具栏不显示 & vue3-seamless-scroll组件的使用-事件捕获 & 给接口追加数据

1、效果

pdf详细版

在这里插入图片描述

2、代码

核心代码

1、pdf工具栏不显示

:src="zbUrl+'#toolbar=0'"

2、接口中base64的处理

1、接口

接口名称	接口地址	接口释义
文件下载(根据文件ID)	/common/file/getFilePathById?fileId=文件ID	返回一个base64的字符串

2、接口方法

src/api/yfdd-bs/PowerLoad.ts

/**
 * pdf回显方法
 */
export const getFile = (fileId: string) => {
  return request({
    method: 'GET',
    url: '/common/file/getFilePathById',
    params: {
      fileId
    }
  })
}

3、页面中引用并获取接口数据

index.vue

import { getFile } from '@/api/yfdd-bs/PowerLoad'

getFile(e).then((res) => {
    zbUrl.value = 'data:application/pdf;base64,' + res
    // console.log(zbUrl.value, 'kkkkkkkkk')
  })

4、接口显示

接口1-显示接口

在这里插入图片描述

接口2-打印接口数据

返回的res-只有一个base64数据

在这里插入图片描述

5、index.vue-完整版

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'
import { onMounted, ref } from 'vue'
import { getDutyRequirement, getFile } from '@/api/yfdd-bs/PowerLoad'
import img from '@/assets/yfdd-bs/right/title/zbyq.png'
const bgImg = ref('bg-zbyq-dialog')
const dialogVisible = ref(false)
const zbUrl = ref<string | null>(null)
const isDialog = (e: any) => {
  // console.log(e, 'lllllll')
  dialogVisible.value = true
  getFile(e).then((res) => {
    zbUrl.value = 'data:application/pdf;base64,' + res
    // console.log(zbUrl.value, 'kkkkkkkkk')
  })
}
// const zbUrl = ref('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf')
const lists:any = ref([])
// const list = ref([
//   { title: '1迎峰度冬值班日报第94期（9月16日）' },
//   { title: '2迎峰度冬值班日报第94期（9月15日）' },
//   { title: '3迎峰度冬值班日报第94期（9月14日）' },
//   { title: '4迎峰度冬值班日报第94期（9月13日）' },
//   { title: '5迎峰度冬值班日报第94期（9月12日）' },
//   { title: '6迎峰度冬值班日报第94期（9月11日）' },
//   { title: '7迎峰度冬值班日报第94期（9月10日）' },
//   { title: '8迎峰度冬值班日报第94期（9月09日）' },
//   { title: '9迎峰度冬值班日报第94期（9月08日）' },
//   { title: '11月10日，公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。公司系统未发生影响电网安全的灾害，安全生产形式总体平稳。' }
// ])

/**
 * 加载值班要求数据
 */
const dutyList = async () => {
  try {
    const res = await getDutyRequirement({})
    // console.log(res, 'kkkkkkkk')
    lists.value = res
    for (let i = 0; i < 10; i++) {
      lists.value.push({
        id: 'c7be18c8023e475f9f189e8b618035f9',
        importantActivitie: '01',
        dutyType: '07',
        createUserId: null,
        createDate: '2021-11-14T07:30:25.000+00:00',
        updateUserId: null,
        updateDate: '2021-11-14T07:32:02.000+00:00',
        content: '哈哈哈哈哈',
        isShow: '01'
      })
    }
    // console.log(lists.value, 'kkkkkkkk')
  } catch (err) {
    console.log(err)
  }
}
onMounted(() => {
  // 调用数据接口
  dutyList()
})
</script>

<template>
  <div class="duty-container">
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[200, 24]"
      @is-dialog="isDialog('cead29c7dd664c24b87465037ae01a56')"
    />
    <el-dialog
      v-model="dialogVisible"
      width="1200px"
      top="120px"
      :modal="false"
      :custom-class="bgImg"
      :close-on-click-modal="false"
      :lock-scroll="false"
    >
      <template #title>
        <div class="title">
          值班要求
        </div>
      </template>
      <!-- 预览内容区 -->
      <div class="show">
        <div class="showCount">
          <div class="count">
            <span v-if="!zbUrl">PDF或图片显示区域</span>
            <!-- pdf工具栏不显示  :src="zbUrl+'#toolbar=0'" -->
            <!--  :src="zbUrl ? zbUrl : ''" -->
            <iframe
              :src="zbUrl+'#toolbar=0'"
              style="width:100%; height:100%;overflow:hidden;"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <vue3-seamless-scroll
      :list="lists"
      class="scroll"
      hover
      :step="0.7"
    >
      <div
        class="item"
        v-for="(item, index) in lists"
        :key="index"
      >
        <span>{{ item.content }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<style scoped lang="scss">
.duty-container {
  grid-area: f;
  background: url(@/assets/yfdd-bs/right/zbyq/zbyq_bg.png) no-repeat;
  background-size: 100% 100%;
  .scroll {
    height: 500px;
    width: 100%;
    margin-left: 30px;
    overflow: hidden;
  }

  .scroll .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 24px;
    margin-right: 60px;
  }
  .title {
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-weight: 600;
    color: white;
    font-size: 26px;
  }
  :deep(.el-dialog__body) {
    overflow-y: hidden;
  }
  .show {
    width: 860px;
    margin-left: 20px;
    background: #ffffff;
    position: relative;
    float: left;
    .showCount {
      .count {
        background: #d8d8d8;
        height: 800px;
        span {
          font-size: 50px;
          color: #333333;
          position: absolute;
          top: 360px;
          left: 200px;
        }
      }
    }
  }
}
</style>

3、vue3-seamless-scroll组件中点击事件的处理

<script lang="ts" setup>
import titleHeader from '../header/titleHeader.vue'

import { ref } from 'vue'
const dialogVisible = ref(false)
//3.0、对子内容的事件进行相应处理
const isDialog = (e:any) => {
  console.log(e)
  dialogVisible.value = true
}
//2.0、绑在父标签上的事件   拿到子内容的id并进行传值
const handleSectionClick = (e:any) => {
  if (e.target.tagName === 'SPAN') {
    isDialog(e.target.dataset.id)
  }
}
const bgImg = ref('bg-dqyj-dialog')
const list = ref([
  {
    id: 1,
    txt: '001文本'
  },
  {
    id: 2,
    txt: '002文本'
  }

])
</script>

<template>
<!--1、绑在父标签上   @click="handleSectionClick($event)"-->
<div
    class="container"
    @click="handleSectionClick($event)"
  >
    <titleHeader
      :src="img"
      :need-line="true"
      :line-width="[270, 24]"
    />
    <vue3-seamless-scroll
      :list="list"
      class="scroll"
      :limit-scroll-num="1"
      :step="0.7"
      hover
    >
      <div
        class="item"
        v-for="(item) in list"
        :key="item.id"
      >
        <!-- <span>{{ item.txt }}</span> -->
        <div style="width: 100%; height: 200px;overflow:hidden">
          <div
            class="yj-count"
          >
              <span
                class="yi-text"
                :data-id="item.id"
              >
                {{ item.txt }}
              </span>
          </div>
        </div>
      </div>
    </vue3-seamless-scroll>
    <el-dialog
      v-model="dialogVisible"
      width="1200px"
      top="120px"
      :modal="false"
      :close-on-click-modal="false"
      :custom-class="bgImg"
      :lock-scroll="false"
    >
      <template #title>
        <div class="title">
          气象预警
        </div>
      </template>
      <div class="dialogContent">
 123
      </div>
    </el-dialog>
  </div>
</template>

4、给接口追加数据

接口文件

src/api/yfdd-bs/PowerLoad.ts

/**
 * 值班要求
 */
export const getDutyRequirement = (data:any) => {
  return request({
    method: 'GET',
    url: '/yfddimportantduty/queryDutyRequirement',
    data
  })
}

index.vue

import { getDutyRequirement } from '@/api/yfdd-bs/PowerLoad'
const lists:any = ref([])
//const lists = ref([
//  { title: '内容1' },
//  { title: '内容2' },
//  { title: '内容3' }
//])

/**
 * 加载值班要求数据
 */
const dutyList = async () => {
  try {
    const res = await getDutyRequirement({})
    // console.log(res, 'kkkkkkkk')
    lists.value = res
      // 给接口数据list追加数据   push------------------------------
    for (let i = 0; i < 10; i++) {
      lists.value.push({
        id: 'c7be18c8023e475f9f189e8b618035f9',
        importantActivitie: '01',
        dutyType: '07',
        createUserId: null,
        createDate: '2021-11-14T07:30:25.000+00:00',
        updateUserId: null,
        updateDate: '2021-11-14T07:32:02.000+00:00',
        content: '哈哈哈哈哈',
        isShow: '01'
      })
    }
    // console.log(lists.value, 'kkkkkkkk')
  } catch (err) {
    console.log(err)
  }
}
onMounted(() => {
  // 调用数据接口
  dutyList()
})

<div  :list="lists"></div>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^