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

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

需求背景

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

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…...

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

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

回归预测 | MATLAB实现GAM广义加性模型多输入单输出回归预测(多指标,多图)

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

css学习4(背景)

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

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

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

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

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

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

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

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

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

SpringBoot部署到腾讯云

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

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…...

基于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…...

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

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

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

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

Neo4j之union基础

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

搭建:基于nginx的上传功能

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

JavaScript高级

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

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

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

web文件上传

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

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

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

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

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

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

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

字符串经典问题

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

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

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

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

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

2、手写模拟Spring底层原理

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

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

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

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

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

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

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

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

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

银河麒麟服务器v10 sp1 .Net6.0 上传文件错误 access to the path is denied

上一篇&#xff1a;银河麒麟服务器v10 sp1 部署.Net6.0 http https_csdn_aspnet的博客-CSDN博客 .NET 6之前&#xff0c;在Linux服务器上安装 libgdiplus 即可解决&#xff0c;libgdiplus是System.Drawing.Common原生端跨平台实现的主要提供者&#xff0c;是开源mono项目。地址…...

钝感力:项目经理的隐形盾牌

钝感力的定义 钝感力的起源和意义 钝感力&#xff0c;或者说对外部刺激的不敏感性&#xff0c;起源于我们的生存本能。在古代&#xff0c;人们面对各种危险和挑战&#xff0c;需要有一定的抗压能力&#xff0c;才能在恶劣环境中生存下来。这种能力使得我们的祖先能够在面对猛兽…...

成集云 | 乐享问题邀请同步企微提醒 | 解决方案

源系统成集云目标系统 方案介绍 腾讯乐享是腾讯公司开发的一款企业社区化知识管理平台&#xff0c;它提供了包括知识库、问答、课堂、考试、活动、投票和论坛等核心应用。这个平台凝聚了腾讯10年的管理经验&#xff0c;可以满足政府、企业和学校在知识管理、学习培训、文化建…...

【TypeScript】基础类型

安装 Node.js 环境 https://nodejs.org/en 终端中可以查到版本号即安装成功。 然后&#xff0c;终端执行npm i typescript -g安装 TypeScript 。 查到版本号即安装成功。 字符串类型 let str:string "Hello"; console.log(str);终端中先执行tsc --init&#xf…...

c++控制台双人格斗小游戏(测试版)

嗨嗨嗨,又是我! 我又来发博客啦! 最近太闲了,又做了个small游戏:小人-格斗(测试版) 上代码! 记得加上gamesio.h哦 #include<cstring> #include<conio.h> #include"gamesio.h" //宏定义一些常量(可更改) #define BULLETNUM 300//子弹最大数量 #defin…...

flink jira 提交开源bug

注册apache issue账号,并申请flink空间的权限后. 提问题/bug 查看已经提交的问题:...

华为杯”研究生数学建模竞赛2018年-【华为杯】D题:基于卫星高度计海面高度异常资料 获取潮汐调和常数方法及应用(续)

目录 5.3 沿轨道各分潮的潮汐调和常数的正压潮和内潮的分离 5.3.1 数据处理 5.3.2 模型准备...

HTTP连接管理

基础知识&#xff1a;非持久连接 HTTP初始时1.0版本在浏览器每一次向服务器请求完资源都会立即断开TCP连接&#xff0c;如果想要请求多个资源&#xff0c;就必须建立多个连接&#xff0c;这就导致了服务端和客户端维护连接的开销。 例如&#xff1a;一个网页中包含文字资源也包…...

漏洞指北-VulFocus靶场专栏-初级02

漏洞指北-VulFocus靶场02-初级 初级005 &#x1f338;phpunit 远程代码执行 (CVE-2017-9841)&#x1f338;step1&#xff1a;进入漏洞页step2&#xff1a; burpsuite 抓包,等待请求页&#xff0c;获得flag 初级006 &#x1f338;splunk 信息泄露 &#xff08;CVE-2018-11409&am…...

无论是小说、公文还是新闻稿,爱校对都是你的最佳选择

在这个数字化的时代&#xff0c;写作已经渗透到我们生活的方方面面。从小说家到政府官员&#xff0c;再到新闻记者&#xff0c;每个人都需要确保他们的文本内容无瑕疵、逻辑清晰。这就是“爱校对”进入舞台的地方。它不仅仅是一个校对工具&#xff0c;更是每个写作者都不可或缺…...

MySQL数据表的损坏及容灾解决方案

引言 在互联网应用中&#xff0c;MySQL是最常用的关系型数据库之一。然而&#xff0c;数据表的损坏可能会导致数据丢失或无法正常访问&#xff0c;给业务运营带来严重影响。本文将讨论MySQL数据表容易损坏的情况&#xff0c;并提供相应的容灾解决方案。 推荐阅读 AI文本 OCR…...

【仿写tomcat】二、扫描java文件,获取带有@WebServlet注解的类

tomcat仿写 项目结构扫描文件servlet注解map容器servlet工具类启动类调用 项目结构 扫描文件之前当然要确定一下项目结构了&#xff0c;我这里的方案是tomcat和项目同级 项目的话就仿照我们平时使用的结构就好了&#xff0c;我们规定所有的静态资源文件都在webApp目录下存放…...

pytorch2.0.1 安装部署(cpu+gpu) linux+windows

官网打开可能较慢&#xff0c;耐心等待 pytorch官网 以下操作在默认网络环境即可使用&#xff0c;2023年8月20日更新 一、说明和前期准备 1.pytorch是一个和tensorflow类似的框架 如果需要安装tensorflow&#xff0c;可以参考&#xff1a; tensorflow 1&#xff0c;2 cpugpu…...

Java数据结构学习和源码阅读(线性数据结构)

线性数据结构 链表 LinkList 链表的数据结构 一组由节点组成的数据结构&#xff0c;每个元素指向下一个元素&#xff0c;是线性序列。 最简单的链表结构&#xff1a; 数据指针&#xff08;存放执行下一个节点的指针&#xff09; 不适合的场景&#xff1a; 需要循环遍历将…...

华为网络篇 多区域OSPF-32

难度2复杂度2 目录 一、实验原理 二、实验拓扑 三、实验步骤 四、实验过程 总结 一、实验原理 OSPF是一种具有区域概念的路由协议&#xff0c;为什么需要分区域&#xff1f;像RIP那样都在一个区域配置也不多这样简单点不是更好吗&#xff1f;OSPF它是一种功能十分强大的IG…...

【HCIP】03.VLAN高级技术

Eth-trunk 链路聚合&#xff0c;定义出一个逻辑聚合口&#xff0c;把物理接口和逻辑接口关联&#xff0c;此时在STP中&#xff0c;会把多个物理接口看成一个逻辑接口&#xff0c;此时不会出现环路。 接口负载分担&#xff08;逐包|逐流&#xff09; 基于IP的散列算法能保证包…...

WebSocket服务端数据推送及心跳机制(Spring Boot + VUE)

一、WebSocket简介 HTML5规范在传统的web交互基础上为我们带来了众多的新特性&#xff0c;随着web技术被广泛用于web APP的开发&#xff0c;这些新特性得以推广和使用&#xff0c;而websocket作为一种新的web通信技术具有巨大意义。WebSocket是HTML5新增的协议&#xff0c;它的…...

根据Dockerfile创建容器案例讲解

-f为dokerfile的路径&#xff0c; -t为新镜像的名称及版本。 后面这个点是寻址路径。...

CF 1328 D Carousel(环构造)

CF 1328 D. Carousel(环构造) Problem - D - Codeforces 大意&#xff1a;给出一个 n 个数组成的环 &#xff0c; 要对环上的点染色 &#xff0c; 要求任意一个相邻数不同的点对染色不同 &#xff0c;求使用最少的颜色数 &#xff0c; 并用颜色数排列构造一种染色方案。 思路…...

什么是SaaS、PaaS、aPaaS、iPaaS、IaaS,一文讲透

在数字化的带动下&#xff0c;各行业对云服务的需求进入快速增长期。 SaaS、PaaS、aPaaS、iPaaS、IaaS…… 这些词经常出现&#xff0c;那么他们分别是什么意思&#xff1f;又有什么区别&#xff1f;小帆带大家一起来看看~ SaaS SaaS&#xff0c;Software as a Service&…...