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

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

news 2026/2/9 20:39:02

需求背景

后端接口中返回的是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

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/8 20:42:43

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56