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

需求背景

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

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

前端适配是这样的

html 复制代码
 <a
        href="https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf"
      >
        超链接预览pdf
      </a>

点击后预览

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

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

项目准备

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

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

登陆阿里云平台

  1. 点击又上角的控制台
  1. 点击左上角的三道杠图标
  1. 点击左侧的对象云存储oss
  1. 点击bucket
  1. 创建 bucket
  1. 创建成功后
  1. 上传文件

点击红框处

点击上传文件

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

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

解决文件链接跨域问题

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

规则设置

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

实现(js)

HML

html 复制代码
<!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">
      <a
        href="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

javascript 复制代码
<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

css 复制代码
<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

使用

javascript 复制代码
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()
相关推荐
梅子酱~12 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友17 分钟前
JS严格模式,启动!
javascript·后端·node.js
Carlos_sam26 分钟前
OpenLayers:如何控制Overlay的层级?
前端·javascript
z_mazin1 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线1 小时前
Mock.js虚拟接口
开发语言·javascript·ecmascript
时光追逐者2 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
ElasticPDF-新国产PDF编辑器2 小时前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
hz.ts2 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武72 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
夏天想2 小时前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant