前端小程序?qū)崿F(xiàn)預(yù)覽pdf并導(dǎo)出完整代碼
更新時(shí)間：2025年01月13日 09:23:49 作者：@Dai
這篇文章主要介紹了小程序中無法直接導(dǎo)出PDF或文檔的解決方案,通過調(diào)用API下載文件并打開,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、前言
小程序沒辦法直接導(dǎo)出pdf或一些文檔，只能借助api先將文件下載下來并打開，再讓用戶手動(dòng)去保存。之前做“小程序當(dāng)前頁面截圖轉(zhuǎn)pdf導(dǎo)出”功能的時(shí)候，小程序好像也無法實(shí)現(xiàn)。所以要打開文件，都讓后端去做吧，要么給前端一個(gè)文件地址，要么返回二進(jìn)制文件流，這樣小程序就能打開文件了。
二、需要的wx api
- downloadFile（下載文件）
- openDocument（打開文件）
showMenu設(shè)置為true才能支持用戶把文件下載到本地
三、完整代碼
const preViewPdf = (url) => { // 預(yù)覽pdf
uni.showLoading({
title: '加載中',
mask: true
})
return new Promise((resolve, reject) => {
uni.downloadFile({
url: baseUrl + url,
header: {
'Authorization': store.state.token
},
success: (res) => {
if (res.statusCode === 200) {
uni.openDocument({
filePath: res.tempFilePath,
showMenu: true, //顯示右上角三個(gè)點(diǎn)，支持手動(dòng)保存到本地
success: (res) => {
uni.hideLoading()
resolve(true)
},
fail: (err) => {
uni.hideLoading()
resolve(true)
uni.showToast({
title: '打開失敗',
icon: 'none'
})
}
})
}
},
fail: (err) => {
uni.hideLoading()
uni.showToast({
title: '下載失敗',
icon: 'none'
})
}
})
})
}總結(jié)
到此這篇關(guān)于前端小程序?qū)崿F(xiàn)預(yù)覽pdf并導(dǎo)出的文章就介紹到這了,更多相關(guān)前端小程序預(yù)覽pdf并導(dǎo)出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序
這篇文章主要介紹了通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
本文通過代碼示例給大家展示了如何讓javascript只執(zhí)行一次，如何實(shí)現(xiàn)這種功能呢？通過下面這段就可以輕松搞定了。2016-07-07
JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法分析
這篇文章主要介紹了JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5相關(guān)函數(shù)修改頁面圖片元素顯示效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JavaScript中比較操作符的用法及對比詳解(===、==、=== null、===““)
在JavaScript中,比較操作符用于確定兩個(gè)值之間的關(guān)系,===（嚴(yán)格等于）和==（抽象等于或?qū)捤傻扔冢┦亲畛Ｓ玫膬蓚€(gè)比較操作符,同時(shí),=== null和===""也體現(xiàn)了JavaScript在類型檢查和值比較方面的獨(dú)特之處,本文將詳細(xì)的給大家介紹這些比較操作符,需要的朋友可以參考下2025-03-03
js canvas實(shí)現(xiàn)圓形流水動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)圓形流水動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了JS常見錯(cuò)誤(Error)及處理方案詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js指定步長實(shí)現(xiàn)單方向勻速運(yùn)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
javascript AutoScroller 函數(shù)類
javascript AutoScroller 自動(dòng)滾動(dòng)類代碼，學(xué)習(xí)類的朋友可以參考下。2009-05-05
jsonp跨域獲取數(shù)據(jù)的基礎(chǔ)教程
這篇文章主要給大家介紹了關(guān)于jsonp跨域獲取數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
前端使用正則表達(dá)式進(jìn)行校驗(yàn)的方法總結(jié)大全
很多時(shí)候我們需要校驗(yàn)用戶輸入的值是否正確,如果格式固定的,直接把錯(cuò)誤的值傳給后端顯然是不合理的,所以我們要直接在前端進(jìn)行正則校驗(yàn),這篇文章主要給大家介紹了關(guān)于前端使用正則表達(dá)式進(jìn)行校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2024-07-07