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、接口

接口名称	接口地址	接口释义
文件下载(根据文件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 = truegetFile(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 = resfor (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-dialogv-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"><divclass="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)"-->
<divclass="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><divclass="item"v-for="(item) in list":key="item.id"><!-- <span>{{ item.txt }}</span> --><div style="width: 100%; height: 200px;overflow:hidden"><divclass="yj-count"><spanclass="yi-text":data-id="item.id">{{ item.txt }}</span></div></div></div></vue3-seamless-scroll><el-dialogv-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>

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

vue中将base64的pdf文件流转换成pdf并预览（二）——base64转PDF工具的使用
vue中将base64的pdf文件流转换成pdf并预览(二)--base64转PDF工具的使用 Base64 to PDF官网 1.官网官网--https://www.ipvoid.com/base ...
vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用
vue中将base64的pdf文件流转换成pdf并预览(一)--vue-pdf组件的基本使用 vue-pdf组件官网--https://www.npmjs.com/package/vue-pdf 1. ...
PDF文件怎么转换成JPG图片？分享两种简单的转换方法
PDF文件怎么转换成JPG格式的图片呢?大家在使用PDF文件的过程中,肯定会遇到过一些内容非常多的文件,而我们需要使用到的地方可能只有几页的内容,大家不管是在使用过程中还是在传输文件的过程中,都会因为 ...
PDF文件如何转换成转图片？分享两种实现方法
PDF文件通常是用于在不同计算机.操作系统和应用程序之间共享文档的标准格式.但有时,您可能需要将PDF文件转换为图像文件以进行其他用途.PDF文件如何转换成转图片?本文将介绍两种将PDF文件转换为图像 ...
pdf文件怎么转换成excel格式？
在办公中文件格式之间的相互转换是很常见的操作方式,就像把不能直接进行编辑的PDF文件转换成excel表格,就可以帮助我们更快更好的做好数据,比起使用传统的编辑方式,显然转换来的效率更高.那pdf文件怎 ...
Java使用aspose把PDF文件转换成PNG文件,以及把PDF文件水印转换成PNG格式
Java代码把PDF文件转换成PNG文件需要引用aspose包,引入操作我写了一个博客,地址如下 https://blog.csdn.net/weixin_46713508/article/deta ...
html文件转换html格式,pdf文件怎么转换成html格式
PDF文件怎么转换成html格式呢?html格式其实就是网页格式,PDF文件和网页文件一般情况下是两种完全不搭边的格式,但是不可否定的是办公室的多样化总有人会有这样的需求,只要有需求就会有其相应的解决 ...
pdf文件怎么转换成图片？
pdf文件怎么转换成图片?今天我要给大家分享一个日常经常用到的办公小技巧,就是pdf文件怎么转换成图片,上个星期我刚好有这么一个需求,老板要求我把一份有着几十页的pdf文件转换成图片给他,所以我也真的 ...
支持导出PDF文件并转换成图片格式的PDF查看控件Spire.PDFViewer
Spire.PDFViewer for .NET是一款功能强大的PDF查看控件.它是由e-iceblue公司在2012年新推出的一款产品.它允许开发者从本地文件夹(File),stream和byte ...

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

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

1、效果

2、代码

1、pdf工具栏不显示

2、接口中base64的处理

1、接口

2、接口方法

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

4、接口显示

5、index.vue-完整版

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

4、给接口追加数据

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

最新文章

热门文章

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

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

1、效果

2、代码

1、pdf工具栏不显示

2、接口中base64的处理

1、接口

2、接口方法

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

4、接口显示

5、index.vue-完整版

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

4、给接口追加数据

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

最新文章

热门文章

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

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