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

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

news 文章来源：https://blog.csdn.net/weixin_43340372/article/details/132334100 2025/4/20 3:42:11

需求背景

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

神经网络改进：注重空间变化,权重参数调整，正则化， 熵的简单理解

目录 神经网络改进&#xff1a;注重空间变化 将高纬空间映射到地位空间便于表示&#xff08;供给数据&#xff09; 将地位空间映射到高纬空间进行分类聚合&#xff08;达到可分状态&#xff08;K-means&#xff09;&#xff09; 神经网络改进&#xff1a;权重参数调整 自注…...

编程日记 2023/8/21 19:29:17

快速入门vue3新特性和新的状态管理库pinia

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 Vue3.3新特性 defineOptions defineModel pinia 介绍 与 Vuex 3.x/4.x 的比较 安装 核心概念 定义…...

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

字符串经典问题

1. 验证回文串 验证回文串 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 t…...

编程日记 2023/8/21 19:26:13

如何将图片应用于所有的PPT页面？

问题&#xff1a;如何快速将图片应用到所有PPT页面&#xff1f; 解答&#xff1a;有两种方法可以解决这个问题。第一种用母板。第二种用PPT背景功能。 解决有时候汇报的时候&#xff0c;ppt中背景图片修改不了以及不知道如何查找&#xff0c;今天按照逆向过程进行操作 方法1…...

编程日记 2023/8/21 19:25:12

打印技巧——word中A4排版打印成A3双面对折翻页

在进行会议文件打印时&#xff0c;我们常会遇到需要将A4排版的文件&#xff0c;在A3纸张上进行双面对折翻页打印&#xff0c;本文对设置方式进行介绍&#xff1a; 1、在【布局】选项卡中&#xff0c;点击右下角小箭头&#xff0c;打开页面设置选项卡 1.1在【页边距】中将纸张…...

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

2、手写模拟Spring底层原理

创建BeanDefinition bean定义 设置BeanDefinition 的类信息&#xff0c;作用域信息 创建beanDefinitionMap scope为原型&#xff1a; scope为单例&#xff1a; 总结&#xff1a; 扫描ComponentScan注解上的包扫描路径&#xff0c;将Component注解修饰的类&#xff0c;生成Bea…...

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

6篇 ICML 2023 杰出论文解析，涉及无学习率、LLM水印、域泛化等方向

ICML 全称 International Conference on Machine Learning&#xff0c;由国际机器学习学会&#xff08;IMLS&#xff09;举办&#xff0c;是计算机人工智能领域的顶级会议。今年的 ICML 大会已是第 40 届&#xff0c;共收到 6538 份投稿&#xff0c;有1827 份被接收&#xff0c…...

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

linux第三阶段--第三方软件（一）MySQL的概述和二进制安装（官网版）

MySQL介绍及安装 一、MySQL概述 DB2 POSTGRE-SQL 1、关系型数据库与非关系型数据库 RDBMS&#xff08;relational database management system&#xff09;&#xff0c;既关系型数据库管理系统。 简单来说&#xff0c;关系型数据库&#xff0c;是指采用了二维表格来组织数…...

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

AD域控制器将辅域控制器角色提升为主域控制器

背景 域控服务器迁移&#xff0c;已将新机器添加为该域的辅域控制器。 主域控制器&#xff1a;test-dc-01 辅域控制器&#xff1a;test-dc-02 需求将主辅域的角色进行互换&#xff0c;test-dc-01更换为辅域&#xff0c;test-dc-02更换为主域。 操作步骤 方法1 命令行修改AD域…...

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

Docker案例分析：创建并运行一个Redis容器

步骤一&#xff1a;到DockerHub搜索Redis镜像 步骤二&#xff1a;查看Redis镜像文档中的帮助信息 步骤三&#xff1a;利用docker run命令运行一个Redis容器 可以看到第二行的命令是支持数据持久化的创建容器命令&#xff0c;但是我们使用的命令如下&#xff1a; docker run -…...

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