vue,uniapp的pdf等文件在線預覽

vue,uniapp文件在線預覽方案,用了個稍微偏門一點的方法實現了
通過后端生成文件查看頁面,然后前端只要展示這個網頁就行,uniapp就用web-view來展示,后臺系統就直接window.open()打開就行

示例查看PDF文件,先將PDF下載路徑轉為Base64

npm install --save js-base64
import {encode} from 'js-base64'let url = 'xxxxxxxxxxxxxxxxxx.pdf';//文件路徑
let tempUrl = encode(url);
let fileurl = encodeURIComponent(tempUrl);
let previewUrl = "http://xxxxxxxxx/onlinePreview"//后端在線查看頁面地址
window.open(previewUrl+'?url=' + fileurl)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/211072.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/211072.shtml
英文地址,請注明出處:http://en.pswp.cn/news/211072.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

每日一練【四數之和】

一、題目描述 18. 四數之和 給你一個由 n 個整數組成的數組 nums ,和一個目標值 target 。請你找出并返回滿足下述全部條件且不重復的四元組 [nums[a], nums[b], nums[c], nums[d]] (若兩個四元組元素一一對應,則認為兩個四元組重復&#x…

基于ssm社區管理與服務的設計與實現論文

目錄 摘 要 1 Abstract 2 第一章 緒論 3 1.1研究背景 3 1.2 研究現狀 3 1.3 研究內容 4 第二章 系統關鍵技術 5 2.1 Java簡介 5 2.2 MySql數據庫 5 2.3 B/S結構 6 2.4 Tomcat服務器 6 第三章 系統分析 7 3.1可行性分析 7 3.1.1技術可行性 7 3.1.2經濟可行性 7 3.1.3運行可行性…

uniapp自定義的日歷(純手寫)

效果圖&#xff1a; html&#xff1a; <!-- 年月 --><view class"box"><view class"box_time"><view class"time"><image click"lefts" :src"url/uploads/20231206/9d1fb520b12383960dca3c214d84fa0…

vue獲取主機id和IP地址

獲取主機id和IP地址 在vue.config.js const os require(“os”); function getNetworkIp() { let needHost “”; // 打開的host try { // 獲得網絡接口列表 let network os.networkInterfaces(); for (let dev in network) { let iface network[dev]; for (let i 0; i …

LLM之Agent(五)| AgentTuning:清華大學與智譜AI提出AgentTuning提高大語言模型Agent能力

?論文地址&#xff1a;https://arxiv.org/pdf/2310.12823.pdf Github地址&#xff1a;https://github.com/THUDM/AgentTuning 在ChatGPT帶來了大模型的蓬勃發展&#xff0c;開源LLM層出不窮&#xff0c;雖然這些開源的LLM在各自任務中表現出色&#xff0c;但是在真實環境下作…

【Android】Glide的簡單使用(下)

文章目錄 緩存設置內存緩存硬盤緩存自定義磁盤緩存行為圖片請求優先級縮略圖旋轉圖片Glide的回調:TargetsBaseTargetTarget注意事項設置具體尺寸的Target 調試及Debug獲取異常信息 配置第三方網絡庫自定義緩存 緩存設置 GlideApp .with(context).load(gifUrl).asGif().error(…

MySQL_7.索引概述

1.什么是索引 在關系數據庫中&#xff0c;索引是一種單獨的、物理的數對數據庫表中一列或多列的值進行排序的一種存儲結構。 它是某個表中一列或若干列值的集合和相應的指向表中物理標識這些值的數據頁的邏輯指針清單 2.索引的優點 (1)通過創建唯一性索引,可以保證數據庫表中每…

編寫Yaml文件當Poc,利用Nuclei掃描器去掃描漏洞

編寫Yaml文件當Poc,利用Nuclei掃描器去掃描漏洞 YAML是一種數據序列化語言&#xff0c;它的基本語法規則注意如下&#xff1a; -大小寫敏感 -使用縮進表示層級關系 -縮進時不允許使用Tab鍵&#xff0c;只允許使用空格。 -縮進的空格數目不重要&#xff0c;只要相同層級的元…

VSCode如何設置Vue前端的debug調試

vscode在調試vue.代碼時&#xff0c;如何進行debug? 1.安裝Chrome Debug插件。 2.在launch.json中&#xff0c;將url修改成你前端項目的路徑&#xff1a; 1 {2 // Use IntelliSense to learn about possible attributes.3 // Hover to view descriptions of existing att…

redis 三主三從高可用集群docker swarm

由于數據量過大&#xff0c;單個Master復制集難以承擔&#xff0c;因此需要對多個復制集進行集群&#xff0c;形成水平擴展每個復制集只負責存儲整個數據集的一部分&#xff0c;這就是Redis的集群&#xff0c;其作用是提供在多個Redis節點間共享數據的程序集。 官網介紹地址 re…

Elasticsearch:向量數據庫的真相

通過工作示例了解什么是向量數據庫、它們如何實現 “相似性” 搜索以及它們可以在明顯的 LLM 空間之外的哪些地方使用。除非你一直生活在巖石下&#xff0c;否則你可能聽說過諸如生成式人工智能和大型語言模型&#xff08;LLM&#xff09;之類的術語。 除此之外&#xff0c;你很…

如何利用Axure制作移動端產品原型

Axure是一款專業的快速原型設計工具&#xff0c;作為專業的原型設計工具&#xff0c;Axure 能夠快速、高效地創建原型&#xff0c;同時支持多人協作設計和版本控制管理。它已經得到了許多大公司的采用&#xff0c;如IBM、微軟、思科、eBay等&#xff0c;這些公司都利用Axure 進…

android 13.0 Settings去掉二級三級菜單搜索功能

1.概述 在13.0的系統rom定制化開發中,由于客戶定制開發需求,需要去掉Settings里面的搜索功能,主頁面的搜索功能,在前面的章節已經講了 這里需要去掉二級三級菜單的搜索功能,需要從搜索功能流程分析去掉搜索功能 2.Settings去掉二級三級菜單搜索功能核心代碼 packages/ap…

stl模板庫成員函數重載類型混肴編譯不通過解決方法

stl模板庫成員函數重載類型混肴編譯不通過解決方法 這種方式編譯不通過IsArithmetic和HasMemberList編譯器存在混肴 template <typename T, typename Enable std::enable_if<IsArithmetic<T>::value>::type >static void DumpWrapper(T* filed, std::strin…

SAP UI5 walkthrough step7 JSON Model

這個章節&#xff0c;幫助我們理解MVC架構中的M 我們將會在APP中新增一個輸入框&#xff0c;并將輸入的值綁定到model&#xff0c;然后將其作為描述&#xff0c;直接顯示在輸入框的右邊 首先修改App.controllers.js webapp/controller/App.controller.js sap.ui.define([&…

python變量的命名和使用

變量名只能包含字母、數字和下劃線 變量名只能包含字母、數字和下劃線。變量名可以字母或下劃線打頭&#xff0c;但不能以數字打頭。例如&#xff0c;可將變量命名為message_1&#xff0c;但不能將其命名為1_message。 Python 語言中&#xff0c;以下劃線開頭的標識符有特殊含…

Redis server啟動源碼

入口main函數 src/redis.c文件main函數 int main(int argc, char **argv) {struct timeval tv;/* We need to initialize our libraries, and the server configuration. */// 初始化庫 #ifdef INIT_SETPROCTITLE_REPLACEMENTspt_init(argc, argv); #endif//設置本地時間setl…

翻譯: 生成式人工智能的經濟潛力 第3部分工作和生產力的影響 The economic potential of generative AI

麥肯錫報告 翻譯: 生成式人工智能的經濟潛力 第一部分商業價值 The economic potential of generative AI翻譯: 生成式人工智能的經濟潛力 第2部分行業影響 The economic potential of generative AI 1. 工作和生產力的影響 技術幾十年來一直在改變工作的解剖學。多年來&…

vue全屏事件與關閉全屏事件

首先&#xff0c;在 Vue 組件中&#xff0c;可以使用 click 或者 v-on 來監聽點擊事件&#xff0c;然后通過調用相應的方法來觸發全屏或關閉全屏。 執行requestFullscreen事件 <template><div><button click"enterFullScreen">進入全屏</butt…

前端知識(十二)———ES6迭代器

ES6中的迭代器是一種新的對象&#xff0c;它具有一個next()方法。next()方法返回一個對象&#xff0c;這個對象包含兩個屬性&#xff1a;value和done。value屬性是迭代器中的下一個值&#xff0c;done屬性是一個布爾值&#xff0c;表示迭代器是否已經遍歷完所有的值。迭代器是一…