問題描述

實現一個查詢功能，后端根據輸入的名稱查詢數據庫，返回對應的圖片鏈接，
將圖片轉成pdf后下載
例如：

后端返回數據如下：
其中照片鏈接是base64加密后的，需要解密

后端參考：https://www.yisu.com/zixun/312294.html

查詢

const {proxy}=getCurrentInstance(); const state = reactive({value: '', // 證書編號resUrl:'', // 圖片結果url }); const onSearch = searchValue => {proxy.axios.get(`http://******************/query/${state.value}`).then((res) => {message.success('查詢成功');state.resUrl = window.atob(res.data['照片'])}).catch((err) => {if(state.value == '') message.warning('請輸入查詢編號');else message.error('查詢失敗');});};

下載

需要注意的點
設置'Content-Type': 'multipart/form-data'，保證格式
設置responseType: "arraybuffer" ， 否則pdf可能是空白

const downloadFile = () => {const config = {headers:{'Content-Type': 'multipart/form-data'},responseType: "arraybuffer" };const fileUrl = "http://****************/pdf/image/to";setInitImg(state.resUrl, `${state.value}.jpg`, (file) => {const fileData ={'file': file,}proxy.axios.post(fileUrl,fileData,config).then((res) => {// 調用封裝好的下載函數download(res.data, 'application/pdf;charset=UTF-8', `${state.value}.pdf`)}).catch((err) => {console.log(err.message);});})};

其中用到了兩個函數

setInitImg

通過圖片鏈接轉換成file格式，由于參考的文章中用的是form表單，默認上傳file，不適用于在線圖片，因此需要先進行格式轉換
新建一個transferFile.js

function setInitImg(url,name,callback){let img = url;//這里是淘寶上隨便找的一張圖片let imgResgetBase64(img, (dataURL) => {imgRes = dataURLtoFile(dataURL, name);callback(imgRes)}); }function getBase64(url, callback) {//通過構造函數來創建的 img 實例，在賦予 src 值后就會立刻下載圖片，相比 createElement() 創建 <img> 省去了 append()，也就避免了文檔冗余和污染var Img = new Image(),dataURL = "";Img.src = urlImg.setAttribute('crossorigin', 'anonymous'); // 解決控制臺跨域報錯的問題Img.onload = function () {//要先確保圖片完整獲取到，這是個異步事件var canvas = document.createElement("canvas"), //創建canvas元素width = Img.width, //確保canvas的尺寸和圖片一樣height = Img.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //將圖片繪制到canvas中dataURL = canvas.toDataURL("image/jpeg"); //轉換圖片為dataURLcallback ? callback(dataURL) : function(){}; //調用回調函數}; }function dataURLtoFile(dataurl, filename) {//將base64轉換為文件，dataurl為base64字符串，filename為文件名（必須帶后綴名，如.jpg,.png）var arr = dataurl.split(","),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime }); }export {setInitImg }

download

創建a標簽下載pdf文件
新建download.js文件

export const download = (res, type, filename) => {// 創建blob對象，解析流數據const blob = new Blob([res], {// 設置返回的文件類型type: type})// 這里就是創建一個a標簽，等下用來模擬點擊事件const a = document.createElement('a')// 兼容webkix瀏覽器，處理webkit瀏覽器中href自動添加blob前綴，默認在瀏覽器打開而不是下載const URL = window.URL || window.webkitURL// 根據解析后的blob對象創建URL 對象const herf = URL.createObjectURL(blob)// 下載鏈接a.href = herf// 下載文件名,如果后端沒有返回，可以自己寫a.download = '文件.pdf'a.download = filenamedocument.body.appendChild(a)// 點擊a標簽，進行下載 a.click()// 收尾工作，在內存中移除URL 對象document.body.removeChild(a)window.URL.revokeObjectURL(herf)}

頁面代碼

<template><div class="container"><div class="header-div"><h1>世界珠寶拍賣數據平臺</h1><p>WORLD JEWELRY AUCTION DATA PLATFORM</p><h2>權威 精準 可靠</h2><p>追蹤來自蘇富比、佳士得、富藝斯、邦瀚斯、嘉德、保利、匡時、瀚海等全球知名權威拍賣行的白鉆、彩鉆、紅寶石、藍寶石、祖母綠拍賣數據，基于圖表形式，為您展示各類寶石的詳盡成交數據記錄、分析成交信息。</p></div><div class="main-div"><div class="illustration"><h1>證書查詢</h1><p>高端珠寶收藏報告代表了最高標準的可靠性、一致性和完整性。我們為所有證書報告提供核對服務，讓您享受更令人放心的保證。借助證書報告核對服務，您可以方便快捷地確認證書中記載的信息與WJADP證書數據庫中存檔的信息是否一致。</p><div class="logo"></div></div><div class="search"><p>查詢證書</p><a-input v-model:value="state.value" placeholder="輸入證書編號" size="large" /><a-button type="primary" size="large" @click="onSearch">查詢</a-button></div><div class="picture" v-show="!state.isShow"><a-carousel :after-change="onChange" dot-position="bottom" arrows dots-class="slick-dots slick-thumb"><template #customPaging="props"><a><img :src="getImgUrl(props.i)" /></a></template><div v-for="item in 6" :key="item"><img :src="getImgUrl(item-1)" width='400'/></div></a-carousel></div><div class="search-data" v-show="state.isShow"><a-descriptions bordered :column="1"><a-descriptions-item label="證書編號">{{state.resForm.id}}</a-descriptions-item><a-descriptions-item label="出證日期">{{state.resForm.date}}</a-descriptions-item><a-descriptions-item label="品種">{{state.resForm.variety}}</a-descriptions-item><a-descriptions-item label="重量">{{state.resForm.weight}}</a-descriptions-item><a-descriptions-item label="證書下載"><a-button type="primary" @click="downloadFile">下載</a-button></a-descriptions-item></a-descriptions><a-image:width="400":src="state.resUrl"/></div></div><div class="footer-div"><p>需要幫助？</p><p>聯系我們</p><p>常見問題</p></div></div></template><script setup>import { reactive, getCurrentInstance } from 'vue';import { message } from 'ant-design-vue';import { setInitImg } from '../src/assets/transferFile'import { download } from '../src/assets/download'const {proxy}=getCurrentInstance();const state = reactive({value: '', // 證書編號isShow: false, // 是否顯示查詢結果resForm:{}, // 查詢結果resUrl:'', // 圖片結果url});// 點擊查詢const onSearch = searchValue => {proxy.axios.get(`http://********************/query/${state.value}`).then((res) => {message.success('查詢成功');state.resForm.id = res.data['編號']state.resForm.date = res.data['時間']state.resForm.variety = res.data['拍賣主石']state.resForm.weight = res.data['重量Ct']state.resUrl = window.atob(res.data['照片'])state.isShow = trueconsole.log(res.data)}).catch((err) => {if(state.value == '') message.warning('請輸入查詢編號');else message.error('查詢失敗');console.log(err);});};// 獲取示例圖片const baseUrl = "./assets/imgs/";const getImgUrl = i => {return require('./assets/imgs/' + i +'.jpg')};const onChange = current => {console.log(current);};// 點擊下載const downloadFile = () => {const config = {headers:{'Content-Type': 'multipart/form-data'},responseType: "arraybuffer"};const fileUrl = "http://*************************/pdf/image/to";setInitImg(state.resUrl, `${state.value}.jpg`, (file) => {console.log(file, file.name, file.size ,'file')const fileData ={'file': file,}proxy.axios.post(fileUrl,fileData,config).then((res) => {// 調用封裝好的下載函數download(res.data, 'application/pdf;charset=UTF-8', `${state.value}.pdf`) }).catch((err) => {console.log(err.message);});})};</script><style scoped lang="scss">.container {text-align: center;display: flex;flex-direction: column;// height: 100vh;}.header-div {background-color: #364d79;color: rgba(255, 253, 253, 0.788);padding: 60px 200px;h1 {color: #fff;font-size: 40px;}h2 {color: rgba(255, 253, 253, 0.788);font-size: 25px;margin: 50px 0 20px 0;}}.main-div {padding: 30px 100px;display: flex;flex-direction: column;align-items: center;.illustration {display: flex;flex-direction: column;align-items: center;h1 {margin: 20px;}p {width: 600px}.logo {width: 100px;height: 100px;margin: 20px 0;background: url("./assets/imgs/logo.jpg") no-repeat center;background-size: 100%;}}.search {display: flex;align-items: center;justify-content: center;p {margin: 0;// width: 100px;font-weight: 800;}input {width: 300px;margin: 30px;}button {background: black;border: none;// width: 100px;}}.picture {width: 700px}.search-data {width: 700px}}.footer-div {background-color: #364d79;padding: 20px;color: #fff;text-align: center;p {display: block;margin: 10px;}}.download-pic {display: flex;justify-content: space-between;.pic {display: flex;flex-direction: column;}}.ant-carousel :deep(.slick-dots) {position: relative;height: auto;}.ant-carousel :deep(.slick-slide img) {border: 5px solid #fff;display: block;margin: auto;// max-width: 80%;}.ant-carousel :deep(.slick-arrow) {display: none !important;}.ant-carousel :deep(.slick-thumb) {bottom: 0px;}.ant-carousel :deep(.slick-thumb li) {width: 60px;height: 45px;}.ant-carousel :deep(.slick-thumb li img) {width: 100%;height: 100%;filter: grayscale(100%);display: block;}.ant-carousel :deep .slick-thumb li.slick-active img {filter: grayscale(0%);} </style>

結果

查詢前

查詢后

總結

以上是生活随笔為你收集整理的图片转成pdf下载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。