uniapp的h5端在線預覽文件

步驟如下:

1、下載需要準備的工具文件包
2、將其解壓到/static/pdf文件夾下,如圖:
解壓好的文件

3、創建在線查看文件的頁面:

<template><view><web-view :src="path"></web-view></view>
</template><script>
export default {data() {return {//你的pdf鏈接,鏈接以https://開頭的可在線訪問的urlfileUrl: "",//pdf.htm所在路徑viewerUrl: '/static/pdf/-pdf--master/hybrid/pdf.html',path: ""};},onLoad(options) {//options.url 在線預覽的文件的地址this.fileUrl = options.url;},onShow() {//進行拼接即可this.path = `${this.viewerUrl}?url=${this.fileUrl}`}
}
</script><style>
</style>

4、準備好這些之后,只要保證你的文件地址能夠訪問,即可在線預覽文件,如圖:
在這里插入圖片描述

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

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

相關文章

linux檢測和重啟python腳本

#!/bin/bash# 檢測Flask應用是否掛了 if ! pgrep -f "flask_app.py" >/dev/null; then# 重啟Flask應用cd /path/to/your/flask/appnohup python3 flask_app.py >/dev/null 2>&1 & fi這是一個簡單的bash腳本&#xff0c;用于檢測Flask應用是否掛掉&a…

JavaScript練手小技巧:一文看懂<script>標簽的 ansyc 和 defer

<script>標簽的 ansyc 和 defer 屬性。只對外部加載 JS 文件有效。 <script src"js/app.js" async></script> <script src"js/app.js" defer></script> 普通加載 js&#xff08;同步加載&#xff09;&#xff1a;會打斷 …

ES7、ES8、ES9、ES10、ES11、ES12 新特性匯總合集

在過去幾年里&#xff0c;ECMAScript 標準不斷更新&#xff0c;引入了許多令人激動的功能和改進。讓我們來看看從 ES7 到 ES12 各個版本帶來的重要變化&#xff1a; 1. ES7&#xff08;ECMAScript 2016&#xff09; 1. Array.prototype.includes 方法 Array.prototype.includ…

【字符串左旋右旋不會做?快來看看這篇“彈幕滾動”,你就有思路了!】

前言 不知道大家在做題時有沒有遇到過“字符串旋轉”的題目&#xff0c;很多人可能沒有思路&#xff0c;這里我不具體講解單一的題目&#xff0c;而是展現一個“彈幕滾動”的示例&#xff0c;相信大家看懂后就能做出“字符串旋轉”的題了&#xff01; 技術名詞解釋 1.什么是“…

關于決策樹模型

決策樹模型是一種常用的數據挖掘方法&#xff0c;它通過模擬人類決策過程來對數據進行分類或回歸分析。決策樹由節點和邊組成&#xff0c;其中每個內部節點代表一個屬性上的測試&#xff0c;每個分支代表測試的一個結果&#xff0c;而每個葉節點&#xff08;樹的末端&#xff0…

Vue3 isProxy,isReactive,isReadonly 三者解析

1、isProxy 作用&#xff1a;判斷當前數據是否為代理數據。 注意&#xff1a;它只對通過 reactive&#xff0c;readonly&#xff0c;shallowReactive&#xff0c;shallowReadonly 這四個方法包裹的數據返回true&#xff0c;對于 ref 以及通過 new Proxy 代理的數據返回都是fal…

ChatGPT科研與AI繪圖及論文高效寫作教程

原文鏈接&#xff1a;ChatGPT科研與AI繪圖及論文高效寫作教程 2023年隨著OpenAI開發者大會的召開&#xff0c;最重磅更新當屬GPTs&#xff0c;多模態API&#xff0c;未來自定義專屬的GPT。微軟創始人比爾蓋茨稱ChatGPT的出現有著重大歷史意義&#xff0c;不亞于互聯網和個人電…

HPE ProLiant MicroServer Gen8更換壞硬盤(RAID 1+0)

HPE ProLiant MicroServer Gen8今天硬盤告警&#xff0c;壞了一塊硬盤&#xff08;估計還是由于上次突然斷電導致的&#xff09;&#xff0c;關機&#xff0c;拆下壞硬盤&#xff0c;更換新硬盤&#xff0c;開機后按了一次F1鍵&#xff0c;系統繼續啟動并正常使用&#xff0c;同…

高性能MySQL 第4版

第一章MySQL架構 MySQL提供了多種鎖的顆粒度&#xff0c;每種MySQL存儲引擎都可以實現自己的鎖策略和鎖力度。 行級鎖是在存儲引擎而不是在服務器中實現的。 隔離界別 READ UNCOMMITTED - 臟讀 在事務中可以可以查看到其他事務中還沒有提交的修改。實際中很少用。 READ C…

Linux網絡編程——socket 通信基礎

Linux網絡編程——socket 通信基礎 1. socket 介紹2. 字節序2.1 簡介2.2 字節序舉例2.3 字節序轉換函數 3. socket 地址3.1 通用 socket 地址3.2 專用 socket 地址 4. IP地址轉換&#xff08;字符串ip -> 整數&#xff0c;主機、網絡字節序的轉換 &#xff09;5. TCP 通信流…

算法------(13)KMP

例題&#xff1a;&#xff08;1&#xff09;AcWing 831. KMP字符串 。。其實寫完也不太理解。。隨便寫點吧 KMP就是求next數組和運用next的數組的過程。相比傳統匹配模式一次更新一單位距離的慢速方法&#xff0c;next數組可以讓下表字符串一次更新n - next【n】個距離&#x…

Java讀取文件

讀取文件為String 、訪問鏈接直接跳轉html 環境&#xff1a;SpringMVC 、前端jsp InputStreamReader FileInputStream fileInputStream new FileInputStream(formatFile.getHtmlpath());InputStreamReader reader new InputStreamReader(fileInputStream, StandardCharsets…

【EAI 026】RoboGen: 通過自動數據生成管線實現機器人技能學習

Paper Card 論文標題&#xff1a;RoboGen: Towards Unleashing Infinite Data for Automated Robot Learning via Generative Simulation 論文作者&#xff1a;Yufei Wang, Zhou Xian, Feng Chen, Tsun-Hsuan Wang, Yian Wang, Zackory Erickson, David Held, Chuang Gan 作者單…

C++:菱形繼承問題

目錄 1、什么是菱形繼承 2、虛擬繼承 3、一些常見問題 1. 什么是菱形繼承&#xff1f;菱形繼承的問題是什么&#xff1f; 2. 什么是菱形虛擬繼承&#xff1f;如何解決數據冗余和二義性的 3. 繼承和組合的區別&#xff1f;什么時候用繼承&#xff1f;什么時候用組合&#…

Qt 自定義長條進度條(類似播放器進度條)

1.運行界面 2.步驟 其實很簡單。 2.1繪制底圖圓角矩形 2.2繪制播放進度圓角矩形 參考&#xff1a;painter繪圖 3.源碼 #pragma once#include <QWidget> #include <QLabel> #include <QHBoxLayout> #include <QMouseEvent> #include <QDebug&g…

Slicer學習筆記(六十五) 3DSlicer的醫學圖像數據增強擴展模塊

1. 醫學圖像數據增強擴展模塊 基于3D Slicer5.1.0 編寫了一個測試醫學圖像的數據增強測試擴展模塊。 擴展模塊名&#xff1a;DataAugementation 項目地址&#xff1a;DataAugmentation 下載該項目后&#xff0c;可以將該擴展模塊添加到3D Slicer的擴展中。 關于如何給3DSlicer…

MySQL數據庫基本操作(一)

數據庫的基本概念 1. 數據庫的英文單詞&#xff1a; DataBase 簡稱 &#xff1a; DB 2. 什么數據庫&#xff1f;* 用于存儲和管理數據的倉庫。 ? 3. 數據庫的特點&#xff1a;1. 持久化存儲數據的。其實數據庫就是一個文件系統2. 方便存儲和管理數據3. 使用了統一的方式操作數…

微信自動回復,基于python

#!/usr/bin/python3 # -*- coding: utf-8 -*-import numpy as np import pandas as pd from uiautomation import WindowControl import csvwx WindowControl(Name微信,searchDepth1 ) # 切換窗口 wx.ListControl() wx.SwitchToThisWindow() # 尋找會話控件綁定 hw wx.…

LaTeX-設置表格大小

文章目錄 LaTeX-設置表格大小1.創建表格2.設置表格的寬度2.1控制表格每一列的寬度2.2控制整個表格的寬度 3.設置表格的外觀4.LaTeX繪制三線表 LaTeX-設置表格大小 本文介紹了LaTeX如何設置表格的大小、改變表格的外觀以及如何繪制三線表。 1.創建表格 在LaTeX中創建表很耗時…

【前端素材】推薦優質后臺管理系統網頁my-Task平臺模板(附源碼)

一、需求分析 1、系統定義 后臺管理系統是一種用于管理網站、應用程序或系統的工具&#xff0c;通常由管理員使用。后臺管理系統是一種用于管理和控制網站、應用程序或系統的管理界面。它通常被設計用來讓網站或應用程序的管理員或運營人員管理內容、用戶、數據以及其他相關功…