当前位置： 首页 > news >正文

pdf格式文件下载不预览，云存储的跨域解决

news 2026/2/10 3:44:41

需求背景

后端接口中返回的是pdf文件路径比如：

pdf文件路径 （https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf）

前端适配是这样的

 <ahref="https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf">超链接预览pdf</a>

点击后预览

但是客户方要求不预览点击后直接下载

示例演示  （pdf下载 - 码上掘金）

项目准备

有pdf链接的可以跨过该阶段

准备一个线上的pdf文件链接

登陆阿里云平台

1. 点击又上角的控制台

 2. 点击左上角的三道杠图标

 3. 点击左侧的对象云存储oss

 4. 点击bucket

5. 创建 bucket

 6. 创建成功后

 7. 上传文件

点击红框处

 点击上传文件

 

8. 上传完成后为了方便访问可以把文件的访问属性修改为公共的

到这里文件链接就创建好了，可以直接复制链接访问

解决文件链接跨域问题

点击数据安全中的跨域设置

规则设置

 

设置完成后就可以随意访问了啦

实现（js）

HML

<!DOCTYPE html>
<html lang="CH-EN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>下载</title></head><body><div class="content"><ahref="https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf">超链接预览pdf</a><button id="btn" type="submit" onclick="download()">点击下载pdf</button></div></body>
</html>

script

<script>const filePath ="https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf";//  fileName是pdf名称 、filePath是pdf地址function downloadFil(fileName, filePath) {var ajax = new XMLHttpRequest();ajax.open("GET", filePath, true);ajax.responseType = "blob";ajax.onload = (e) => {console.log(e);let res = e.target.response;let blob = new Blob([res]);let aLink = document.createElement("a");aLink.download = `${fileName}.pdf`; // 下载文件的名字aLink.href = URL.createObjectURL(blob);aLink.click();};ajax.send();}function download() {downloadFil("test", filePath);}
</script>

style

<style>* {margin: 0;padding: 0;}body {display: flex;align-items: center;justify-content: center;}.content {height: 300px;width: 500px;border: solid #ddd 1px;text-align: center;padding: 20px;}.content input {height: 24px;line-height: 24px;font-size: 18px;border: 1px solid #dcdfe6;}.content input:focus {outline: none;border-color: #409eff;}.content input:focus-visible {outline-offset: 0px;}
</style>

实现（vue）

downloadjs

github地址：https://github.com/rndme/download

安装


npm install downloadjs -S

导入

import download from "downloadjs"


使用

download(url, strFileName, strMimeType);
download第一个参数为URL，第二个参数为文件名称，第三个参数文件类型，url必填，另外两个选填

遇到的问题

1.下载的文件打不开，且大小不对 // 中文名称文件下载 download(encodeURI(URL))
2.不能自定义名称
在URL进行转码后虽然可以下载PDF文件了，但名称却是转码后的名称，而不是原本的名称，这时我们用第二个参数进行命名时，名称是对了，可文件却出现打不开，大小不对的情况，暂时没找到解决方法。

file-saver

github地址：https://github.com/eligrey/FileSaver.js

该库是我之前写页面转PDF时使用到的库，既然之前可以保存pdf文件，那现在是不是也可以呢，上网一搜还真可以

安装

npm i file-saver

使用 

const that = this
var oReq = new XMLHttpRequest()
var URL= '' // URL 为URL地址
oReq.open('GET', URL, true)
oReq.responseType = 'blob'
oReq.onload = function() {var file = new Blob([oReq.response], {type: 'blob'})FileSaver.saveAs(file, that.name) // that.name为文件名
}
oReq.send()

相关文章：

pdf格式文件下载不预览，云存储的跨域解决

需求背景 后端接口中返回的是pdf文件路径比如&#xff1a; pdf文件路径 &#xff08;https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf&#xff09; 前端适配是这样的 <ahref"https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf&…...

编程日记 2023/8/21 19:49:49

httplib + nlohmann::json上传数据时中文乱码解决

1、nlohmann::json 1.1 编码格式使用UTF-8 参考 nlohmann::json 中文乱码解决方案 &#xff08;1&#xff09;将数据先转为UTF-8格式 2、httplib 2.1 上传数据前 &#xff08;1&#xff09;调用httplib::Response对象的set_header()方法来设置编码格式 httplib::Response res…...

编程日记 2023/8/21 19:48:47

JavaScript中的设计模式之一--单例模式和模块

虽然有一种疯狂天才的感觉可能很诱人&#xff0c;但重新发明轮子通常不是设计软件的最佳方法。很有可能有人已经遇到了和你一样的问题&#xff0c;并以一种聪明的方式解决了它。这样的最佳实践在形式化后被称为设计模式。今天我们来看看它们的概念&#xff0c;并检查单例模式和…...

编程日记 2023/8/21 19:47:46

回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本…...

编程日记 2023/8/21 19:46:45

css学习4（背景）

1、CSS中&#xff0c;颜色值通常以以下方式定义: 十六进制 - 如&#xff1a;"#ff0000"RGB - 如&#xff1a;"rgb(255,0,0)"颜色名称 - 如&#xff1a;"red" 2、background-image 属性描述了元素的背景图像. 默认情况下&#xff0c;背景图像进…...

编程日记 2023/8/21 19:45:44

二、SQL，如何实现表的创建和查询

1、新建表格&#xff08;在当前数据库中新建一个表格&#xff09;&#xff1a; &#xff08;1&#xff09;基础语法&#xff1a; create table [表名]( [字段:列标签] [该列数据类型] comment [字段注释], [字段:列标签] [该列数据类型] comment [字段注释], ……&#xff0c…...

编程日记 2023/8/21 19:44:43

大数据及软件教学与实验专业实训室建设方案

一 、系统概述 大数据及软件教学与实验大数据及软件教学与实验在现代教育中扮演重要角色&#xff0c;这方面的教学内容涵盖了大数据处理、数据分析、数据可视化和大数据应用等多个方面。以下是大数据及软件教学与实验的一般内容&#xff1a;1. 数据基础知识&#xff1a;教授学生…...

编程日记 2023/8/21 19:43:42

信创办公–基于WPS的EXCEL最佳实践系列 （公式和函数）

信创办公–基于WPS的EXCEL最佳实践系列 &#xff08;公式和函数&#xff09; 目录 应用背景相关知识操作步骤1、认识基本的初级函数2、相对引用&#xff0c;绝对引用&#xff0c;混合引用3、统计函数4、文本函数 应用背景 熟练掌握Excel的函数工具能让我们在日常的使用中更加方…...

编程日记 2023/8/21 19:42:39

【Apollo】自动驾驶感知——毫米波雷达

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…...

编程日记 2023/8/21 19:41:38

SpringBoot部署到腾讯云

SpringBoot部署到腾讯云 此处默认已经申请到腾讯云服务器&#xff0c;因为本人还没有申请域名&#xff0c;所以就直接使用的ip地址 XShell连接到腾讯云 主机中填写腾讯云的公网ip地址 公网ip地址在下图中找到 接下来填写服务器的用户名与密码 一般centOS用户名为root&#xff…...

编程日记 2023/8/21 19:40:36

Git 设置代理

Git 传输分两种协议&#xff0c;SSH和 http(s)&#xff0c;设置代理也需要分两种。 http(s) 代理 Command Line 使用 命令行 模式&#xff0c;可以在Powershell中使用以下命令设置代理&#xff1a; $env:http_proxy"http://127.0.0.1:7890" $env:https_proxy&quo…...

编程日记 2023/8/21 19:39:33

基于Spring Boot的机场VIP客户管理系统的设计与实现（Java+spring boot+MySQL）

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的机场VIP客户管理系统的设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java s…...

编程日记 2023/8/21 19:38:31

图数据库_Neo4j学习cypher语言_使用CQL_构建明星关系图谱_导入明星数据_导入明星关系数据_创建明星关系---Neo4j图数据库工作笔记0009

首先找到明星数据 可以看到有一个sheet1,是,记录了所有的关系的数据 然后比如我们搜索一个撒贝宁,可以看到撒贝宁的数据 然后这个是构建的CQL语句 首先我们先去启动服务 neo4j console 然后我们再来看一下以前导入的,可以看到导入很简单, 就是上面有CQL 看一下节点的属性...

编程日记 2023/8/21 19:37:30

恒运资本：算力概念强势拉升，亚康股份“20cm”涨停，首都在线等大涨

算力概念21日盘中强势拉升&#xff0c;到发稿&#xff0c;亚康股份“20cm”涨停&#xff0c;首都在线、汇金股份涨逾11%&#xff0c;鸿博股份亦涨停&#xff0c;南凌科技涨近9%&#xff0c;科创信息、神州数码、铜牛信息等涨超7%。 音讯面上&#xff0c;8月19日&#xff0c;202…...

编程日记 2023/8/21 19:36:27

Neo4j之union基础

UNION 用于将多个 MATCH 或 RETURN 子句的结果合并为一个结果集。它可以用来合并不同模式的节点和关系&#xff0c;或者将多个查询的结果合并在一起。以下是一些常用的示例和解释&#xff1a; 基本用法&#xff1a; MATCH (p:Person) WHERE p.age > 30 RETURN p.name AS n…...

编程日记 2023/8/21 19:35:24

搭建：基于nginx的上传功能

搭建&#xff1a;基于nginx的上传功能 文章目录 搭建&#xff1a;基于nginx的上传功能一、准备二、安装nginx1.1 解压nginx和nginx插件1.2 编译并安装nginx 三、启动一个python后台服务&#xff0c;用于上传到临时路径文件&#xff0c;转移到正式路径四、添加nginx配置&#xf…...

编程日记 2023/8/21 19:34:23

JavaScript高级

1、JavaScript面向对象 1.1、面向对象介绍 ​ 在 Java 中我们学习过面向对象&#xff0c;核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。 1.2、类的定义和使用 结构说明 代码实现 <!DOCTYPE html> <html lang"en"> <head>…...

编程日记 2023/8/21 19:33:22

隔断让你的办公室变得更加智能、环保、人性化

隔断可以在办公室中起到多种重要作用&#xff0c;使办公室更加智能、环保和人性化。以下是一些可能的方式&#xff1a; 1. 智能办公室控制系统&#xff1a;可以通过隔断集成智能办公室控制系统&#xff0c;实现办公室照明、温度和空调等设备的自动调节&#xff0c;提高能效和舒…...

编程日记 2023/8/21 19:32:20

web文件上传

文件上传指的是&#xff0c;将本地的图片、视频、音频上传到服务器&#xff0c;提供给其他用户浏览和下载的过程 前端需求 想要进行文件上传对于web前端来说有三个重要要素 1.<input type"file" name"image"> 提供这样的file文件上传格式 2. metho…...

编程日记 2023/8/21 19:31:19

二刷LeetCode--48. 旋转图像(C++版本)，数学题

思路&#xff1a;主要是观察变化之后的数组和最开始的数组的区别&#xff0c;不难发现&#xff0c;先转置在左右镜像对称即可。需要注意的是转置和镜像对称中for变量的终止条件。 class Solution { public:void rotate(vector<vector<int>>& matrix) {// 行数…...

编程日记 2023/8/21 19:30:19

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2026/2/5 4:18:48

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/12/14 16:22:05

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/9/20 3:28:39

Java中栈的多种实现类详解

Java中栈的多种实现类详解&#xff1a;Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...

编程新知 2025/12/3 1:36:31

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

编程新知 2025/9/11 18:09:26

OpenHarmony标准系统-HDF框架之I2C驱动开发

文章目录 引言I2C基础知识概念和特性协议&#xff0c;四种信号组合 I2C调试手段硬件软件 HDF框架下的I2C设备驱动案例描述驱动Dispatch驱动读写 总结 引言 I2C基础知识 概念和特性 集成电路总线&#xff0c;由串网12C(1C、12C、Inter-Integrated Circuit BUS)行数据线SDA和串…...

编程新知 2026/1/28 8:52:29

Qt 按钮类控件（Push Button 与 Radio Button）（1）

文章目录 Push Button前提概要API接口给按钮添加图标给按钮添加快捷键 Radio ButtonAPI接口性别选择 Push Button&#xff08;鼠标点击不放连续移动快捷键&#xff09; Radio Button Push Button 前提概要 1. 之前文章中所提到的各种跟QWidget有关的各种属性/函数/方法&#…...

编程新知 2026/1/29 2:54:53

迁移科技3D视觉系统：重塑纸箱拆垛场景的智能革命

一、传统拆垛场景的困局与破局之道 在汽车零部件仓库中&#xff0c;每天有超过2万只异形纸箱需要拆垛分拣。传统人工拆垛面临三大挑战&#xff1a; 效率瓶颈&#xff1a;工人每小时仅能处理200-300件&#xff0c;且存在间歇性疲劳安全隐患&#xff1a;20kg以上重箱搬运导致年…...

编程新知 2025/9/19 10:55:36