vue中对pdf文件和路径的处理

根据url预览pdf文件

地址栏输入url可以直接预览的pdf,这种我们可以直接使用vue-pdf进行预览

<div class="animation-box-pdf"><pdf :src="url" /></div><script>
import Pdf from 'vue-pdf'export default {components: {Pdf,},data() {return {url: 'http://xxx/xxx/test.pdf',}},methods: {}
}

把文件的url地址转成base64字符串

有时候我们拿到了文件的url,需要把这个url的文件内容转成base64字符串,作为参数传给后端

async handleUrlToBase64(type) {// 把文件的url地址转成base64字符串const fileBase64 = await new Promise((resolve) => {// 使用Fetch API获取PDF文件内容fetch('https://example.com/path.pdf').then(response => response.blob()) // 将响应转换为Blob对象.then(blob => {// 使用FileReader读取Blob并转换为base64字符串let reader = new FileReader();reader.onload = function() {// 注意:这个地方的base64是截取了,后面的字符串的,需要注意是否截取字符串resolve(reader.result.split(',')[1]); // 转换后的base64字符串};reader.readAsDataURL(blob); // 以DataURL形式读取Blob}).catch(error => {this.$YsMessage.error("文件解析失败");});});console.log(fileBase64) // base64字符串// 调接口传base64字符串},},

根据返回的文件流预览pdf文件

后端接口返回的是文件流,我们需要将文件流预览到页面展示。
我们将文件流转成url,并预览url(预览就可以直接使用url借助vue-pdf进行预览了)

    handleBinaryToUrl(binary) {const url = window.URL.createObjectURL(new Blob(binary, {type: "application/pdf;charset=utf-8",}));this.url = url;},

把文件流上传到服务器,把上传后的路径传给后端\

需要将文件流转成blob上传

// const blob = new Blob([pdfFileStream], { type: 'application/pdf;charset=utf-8' });
const formData = new FormData();
const fileName = `test.pdf`;
formData.append('file', this.blob, fileName);
fetch('/api/upload', {method: 'post',body: formData
})
.then(res => {const filePath = `webDownLoad/xxxx/${fileName}`;// 将filePath传给后端
})
.catch(err => {
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/205919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2021年第十届数学建模国际赛小美赛B题疾病传播的风险解题全过程文档及程序

2021年第十届数学建模国际赛小美赛 B题 疾病传播的风险 原题再现&#xff1a; 空气传播疾病可以通过咳嗽或打喷嚏、喷洒液体或灰尘传播。另一方面&#xff0c;一些常见的传染病只能通过飞沫传播。请建立一个模型&#xff0c;以评估密闭空间内空气传播和液滴传播疾病的可能性。…

GitLab 服务更换了机器,IP 地址或域名没有变化时,可能会出现无法拉取或提交代码的情况。

当 GitLab 服务更换了机器&#xff0c;但 IP 地址或域名没有变化时&#xff0c;可能会出现无法拉取或提交代码的情况。 这可能是由于 SSH 密钥或 SSL 证书发生了变化。以下是一些可能的解决步骤&#xff1a; 这可能是由于 SSH 密钥或 SSL 证书发生了变化。以下是一些可能的解决…

常用API

API(全称 Application Programming Interface&#xff1a;应用程序编程接口) 就是别人写好的一些程序&#xff0c;给我们直接拿去调用即可解决问题的。 包 什么是包&#xff1f; 包是用来分门别类的管理各种不同程序的&#xff0c;类似于文件夹&#xff0c;建包有利于程序的管…

【AIGC】prompt工程从入门到精通--图片生成专题

本文为系列教程【AIGC】prompt工程从入门到精通的子教程。 一、介绍 与文本提示相比&#xff0c;找到最佳的提示词来生成完美的图片并没有那么成熟。这可能是因为创建对象自身的挑战&#xff0c;这些对象基本上是主观的并且往往缺乏良好的准确性度量方法。 本指南涵盖了基本…

1.PyTorch数据结构Tensor常用操作

import torch as t t.__version__2.1.1从接口的角度来讲&#xff0c;对tensor的操作可分为两类&#xff1a; torch.function&#xff0c;如torch.save等。另一类是tensor.function&#xff0c;如tensor.view等。 为方便使用&#xff0c;对tensor的大部分操作同时支持这两类接…

.NET 8 中 Android 资源生成的改进和变化

作者&#xff1a;Dean Ellis 排版&#xff1a;Alan Wang 随着 .NET 8 的发布&#xff0c;我们引入了一个新系统&#xff0c;用于生成访问 Android 资源的 C# 代码。 在 Xamarin.Android、.NET 6 和 .NET 7 中生成 Resource.designer.cs 文件的系统已经被弃用。 新系统生成一个名…

No Chromedriver found that can automate Chrome ‘x.x.xxxx‘的解决办法

一、前置说明 在使用Appium对Android设备自动化测试时&#xff0c;切换WebView时抛出异常&#xff1a; selenium.common.exceptions.WebDriverException: Message: An unknown server-side error occurred while processing the command. Original error: No Chromedriver foun…

分布式训练类的定义以及创建分布式模型

一 、分布式训练类的定义 from ..modules import Module from typing import Any, Optional from .common_types import _devices_t, _device_tclass DistributedDataParallel(Module):process_group: Any ...dim: int ...module: Module ...device_ids: _devices_t ...ou…

iOS(swiftui)——网络连接(Moya)

Moya 是一个流行的 Swift 网络抽象层&#xff0c;被用于简化 iOS 应用程序中的网络请求。使用 Moya&#xff0c;可以定义网络请求的方式&#xff0c;增加类型安全性&#xff0c;因为所有的网络请求都是经过 Swift 类型系统检查的&#xff0c;并且 Moya 提供了一种很好的方式来将…

利用 Python 进行数据分析实验(五)

一、实验目的 使用Python解决问题 二、实验要求 自主编写并运行代码&#xff0c;按照模板要求撰写实验报告 三、实验步骤 1 爬取并下载当当网某一本书的网页内容&#xff0c;并保存为html格式 2 在豆瓣网上爬取某本书的前50条短评内容并计算评分的平均值(自学正则表达式) …

交叉验证以及scikit-learn实现

交叉验证 交叉验证既可以解决数据集的数据量不够大问题&#xff0c;也可以解决参数调优的问题。 主要有三种方式&#xff1a; 简单交叉验证&#xff08;HoldOut检验&#xff09;、k折交叉验证&#xff08;k-fold交叉验证&#xff09;、自助法。 本文仅针对k折交叉验证做详细解…

ZooKeeper学习一

一、概念 ZooKeeper是一个开放源码的分布式协调服务&#xff0c;它是集群的管理者&#xff0c;监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作&#xff0c;最终将简单易用的接口和性能高效、功能稳定的系统提供给用户。 分布式应用程序可以基于ZooKeeper实现…

GO设计模式——4、单例模式(创建型)

目录 单例模式&#xff08;Singleton Pattern&#xff09; 优缺点 使用场景 饿汉式和懒汉式单例模式 单例模式&#xff08;Singleton Pattern&#xff09; 单例模式&#xff08;Singleton Pattern&#xff09;是一个类只允许创建一个对象&#xff08;或者实例&#xff…

基于ssm vue个人需求和地域特色的外卖推荐系统源码和论文

首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项…

利用管道、信号量、信号、共享内存和消息队列进行多进程通信

一.管道&#xff08;分为命名管道和匿名管道&#xff09; 管道的特点&#xff1a; ①无论是命名管道还是匿名管道&#xff0c;写入管道的数据都存放在内存之中。 ②管道是一种半双工的通信方式&#xff08;半双工是指终端A能发信号给终端B&#xff0c;终端B也能发信号给终端…

css的4种引入方式--内联样式(标签内style)、内部样式表(<style>)、外部样式表(<link>、@import)

1.内联样式&#xff08;Inline Styles&#xff09;&#xff1a;可以直接在HTML元素的style属性中定义CSS样式。 例如&#xff1a; <p style"color: red; font-size: 16px;">这是一段红色的文本</p>内联样式适用于对单个元素应用特定的样式&#xff0c;…

软件开发安全指南

2.1.应用系统架构安全设计要求 2.2.应用系统软件功能安全设计要求 2.3.应用系统存储安全设计要求 2.4.应用系统通讯安全设计要求 2.5.应用系统数据库安全设计要求 2.6.应用系统数据安全设计要求 软件开发全资料获取&#xff1a;点我获取

Linux 网络协议

1 网络基础 1.1 网络概念 网络是一组计算机或者网络设备通过有形的线缆或者无形的媒介如无线&#xff0c;连接起来&#xff0c;按照一定的规则&#xff0c;进行通讯的集合( 缺一不可 )。 5G的来临以及IPv6的不断普及&#xff0c;能够进行联网的设备将会是越来越多&#xff08…

ERP数据仓库模型

ERP数据仓库模型建设是一个复杂的过程&#xff0c;涉及到多个主题域。以下是一个详细的设计方案&#xff1a; 确定业务需求和目标 在开始设计数据仓库模型之前&#xff0c;需要了解企业的业务需求和目标。这包括了解企业的运营模式、业务流程、关键绩效指标等。通过与业务部门…

vue 商品列表案例

my-tag 标签组件的封装 1. 创建组件 - 初始化 2. 实现功能 (1) 双击显示&#xff0c;并且自动聚焦 v-if v-else dbclick 操作 isEdit 自动聚焦&#xff1a; 1. $nextTick > $refs 获取到dom&#xff0c;进行focus获取焦点 2. 封装v-focus指令 (2) 失去焦点&#xff0c;隐藏…