当前位置： 首页 > news >正文

vue：前端预览 / chrome浏览器设置 / ＜iframe＞ 方法预览 doc、pdf / vue-pdf 预览pdf

news 来源：原创 2025/8/22 2:40:20

一、本文目标

<iframe> 方法预览 pdf 、word

vue-pdf 预览pdf

二、<iframe> 方法

2.1、iframe 方法预览需要 浏览器 设置为：

chrome：设置-隐私设置和安全性-网站设置-更多内容设置-PDF文档

浏览器访问：

chrome://settings/content/pdfDocuments

2.2、代码

<iframeclassName="pdf-iframe"title="预览文档"src="http://aaa.bbb.com/test.pdf"width="100%"height="100%"
/>

2.3、chrome 浏览器查看

注：该预览的功能样式为chrome浏览器默认提供：左侧导航页面、顶部功能栏

功能样式都不错，很满意

2.4、 chrome 未打开设置

2.5、Edge 浏览器预览

三、vue-pdf 方法

3.1、安装插件

pnpm add vue-pdf

3.2、代码

<pdfref="myPdfComponent"src="http://aaa.bbb.com/test.pdf":page="1"style="width: 100%; height: 100%;"
/>

3.3、浏览器预览

本文并没有发现 vue-pdf 有通过 配置属性来实现 类似 iframe 预览效果的功能栏，但是完全可以通过代码来实现，并不复杂。

四、欢迎交流指正

参考链接

https://juejin.cn/post/7291936784773496843

Vue PDF文件预览vue-pdf - 潇湘羽西 - 博客园

vue中前端如何实现pdf预览功能(含vue-pdf插件用法)_vue.js_脚本之家

Vue3实现预览PDF文件的多种方式(超简单)_vue.js_脚本之家

相关文章：

vue：前端预览 / chrome浏览器设置 / ＜iframe＞ 方法预览 doc、pdf / vue-pdf 预览pdf

一、本文目标 <iframe> 方法预览 pdf 、word vue-pdf 预览pdf 二、<iframe> 方法 2.1、iframe 方法预览需要 浏览器 设置为&#xff1a; chrome&#xff1a;设置-隐私设置和安全性-网站设置-更多内容设置-PDF文档 浏览器访问&#xff1a; chrome://settings/co…...

编程日记 2025/8/22 2:40:20

Axure疑难杂症：详解横向菜单左右拖动效果及阈值说明

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ 课程主题：横向菜单左右拖动 主要内容：菜单设计、拖动效果、阈值设计 应用场景：APP横向菜单栏、台账菜单栏、功能选择栏等 案例展示： 案例视频： 横向菜单左右拖动效果 正文内容： 最近很多粉丝私信我，横向…...

编程日记 2025/8/21 16:18:31

多视图几何--立体校正--Bouguet方法

Bouguet算法的数学原理详解 Bouguet算法的核心目标是实现双目相机的极线校正&#xff0c;使左右图像的对应点位于同一水平线上&#xff0c;从而简化立体匹配。其数学原理围绕旋转矩阵分解、极线约束构造和重投影优化展开&#xff0c;以下是分步推导&#xff1a; 一、坐标系定义…...

编程日记 2025/8/21 18:03:31

debian12 mysql完全卸载

MySQL 的数据目录通常是 /var/lib/mysql&#xff0c;配置文件通常在 /etc/mysql 目录下。使用以下命令删除这些目录&#xff1a; sudo rm -rf /var/lib/mysql sudo rm -rf /etc/mysql清理残留文件 sudo find / -name "mysql*" -exec rm -rf {} \; 2>/dev/null验…...

编程日记 2025/8/22 9:06:59

随机动作指令活体检测技术的广泛应用，为人脸识别安全保驾护航

随着人脸识别技术在金融支付、门禁系统、手机解锁等领域的广泛应用&#xff0c;攻击手段也日益多样化&#xff0c;如照片、视频回放、3D面具等伪造方式对系统安全构成严重威胁。传统的人脸识别技术难以区分真实人脸与伪造攻击&#xff0c;正是在这样的背景下&#xff0c;随机动…...

编程日记 2025/8/21 10:00:33

Chrome 135 版本开发者工具（DevTools）更新内容

Chrome 135 版本开发者工具&#xff08;DevTools&#xff09;更新内容 一、性能&#xff08;Performance&#xff09;面板改进 1. 性能面板中的配置文件和函数调用现已显示来源和脚本链接 Performance > Summary&#xff08;性能 > 概览&#xff09;选项卡现在会显示配…...

编程日记 2025/8/22 9:01:27

《算法：以三种算法思想及两种优化策略解决Fibonacci数》

文章目录 0.题目:red_circle:一.递归记忆化搜索**a.普通递归****b.记忆化搜索&#xff08;优化&#xff09;**算法讲解: :red_circle:二.前缀和a.算法讲解b.代码示例 :red_circle:三.动态规划滚动数组a.算法讲解b.普通动规代码示例c.滚动数组优化 作者的个人gitee 作者的算法讲…...

编程日记 2025/8/22 8:59:42

定制开发开源AI智能名片S2B2C商城小程序源码中的产品运营协同进化机制研究

摘要 在数字化产品发展进程中&#xff0c;产品经理与运营人员的协同工作机制对产品迭代方向具有决定性作用。本文以定制开发开源AI智能名片S2B2C商城小程序源码为研究对象&#xff0c;通过分析其技术架构中的智能推荐系统、三级账户体系及社交裂变引擎等创新模块&#xff0c;揭…...

编程日记 2025/8/22 9:02:56

Colmap的安装和使用

Colmap 网站: https://colmap.github.io/GitHub: https://github.com/colmap/colmap 安装 Windows 从 GitHub发布页 GitHub Releases 下载预编译的二进制, 区分带CUDA和不带CUDA的版本. Ubuntu 在 Ubuntu 22.04 下可以通过apt install colmap安装, 但是这样安装的是不带C…...

编程日记 2025/8/21 19:23:10

Springboot框架—单元测试操作

Springboot单元测试的操作步骤&#xff1a; 1.添加依赖spring-boot-starter-test 在pom.xml中添加依赖spring-boot-starter-test 2.在src/test/java下新建java class 3.单元测试入口代码结构 import org.junit.Test; import org.junit.runner.RunWith; import org.springfra…...

编程日记 2025/8/21 17:19:43

Elasticearch数据流向

Elasticearch数据流向 数据流向图 --- config: layout: elk look: classic theme: mc --- flowchart LR subgraph s1["图例"] direction TB W["写入流程"] R["读取流程"] end A["Logstash Pipeline"] -- 写入请求 --> B["Elas…...

编程日记 2025/8/22 9:05:03

dB，dBi, dBd, dBc，dBm，dBw释义及区别

贝尔(B) 贝尔(B)最初用于表示音量功率10与1的比值&#xff0c;亚历山大.格拉汉姆.贝尔的名字命名。因此&#xff0c;1B表示功率比10:1&#xff0c;这是一种对数的关系&#xff0c;底数为10&#xff0c;100:12B&#xff0c;1000:13B。即lg(P2/P1)。 可以看出B是一个较大的单位…...

编程日记 2025/8/21 20:12:46

CRM是企业AI Agent应用的关键切入点

CRM&#xff08;Customer Relationship Management&#xff0c;客户关系管理&#xff09;是一套用于系统化管理企业与客户交互的技术、策略和流程&#xff0c;旨在优化客户体验、提升忠诚度并驱动业务增长。其核心功能包括客户数据整合&#xff08;如联系信息、交易记录、行为轨…...

编程日记 2025/8/22 9:05:02

aws(学习笔记第三十八课) codepipeline-build-deploy-github-manual

文章目录 aws(学习笔记第三十八课) codepipeline-build-deploy-github-manual学习内容&#xff1a;1. 整体架构1.1 代码链接1.2 全体处理架构 2. 代码分析2.1 创建ImageRepo&#xff0c;并设定给FargateTaskDef2.2 创建CodeBuild project2.3 对CodeBuild project赋予权限&#…...

编程日记 2025/8/21 13:42:13

【数据分享】1999—2023年地级市市政公用事业和邮政、电信业发展情况相关指标（Shp/Excel格式）

在之前的文章中&#xff0c;我们分享过基于2000-2024年《中国城市统计年鉴》整理的1999-2023年地级市的人口相关数据、染物排放和环境治理相关数据、房地产投资情况和商品房销售面积相关指标数据、社会消费品零售总额和年末金融机构存贷款余额、各类用地面积、地方一般公共预算…...

编程日记 2025/8/22 9:05:03

vscode 跳转失败之c_cpp_properties.json解析

{"configurations": [{"name": "Linux", // 配置名称&#xff0c;对应当前平台&#xff0c;VS Code 中可选"includePath": ["${workspaceFolder}/**", // 包含当前工作区下所有文件夹的头文件&#xff08;递归&…...

编程日记 2025/8/21 15:04:31

批量将图片转换为 jpg/png/Word/PDF/Excel 等其它格式

图片的格式种类非常的多&#xff0c;常见的图片格式就有 jpg、png、webp、bmp 等等&#xff0c;我们在工作当中经常会碰到需要将一种格式的图片转换为其他格式的需求。今天就给大家介绍一种方法&#xff0c;可以实现批量转换图片格式&#xff0c;支持各种格式的图片之间相互转换…...

编程日记 2025/8/20 14:18:43

MCP+Blender创建电力塔

MCP&#xff08;Model Context Protocol&#xff09;与Blender的结合是当前AI与3D建模领域的热门技术&#xff0c;它通过协议化的方式让Claude等AI模型直接控制Blender&#xff0c;实现自动化3D建模。 1. 功能与原理 • 核心能力&#xff1a;用户通过自然语言指令&#xff08;…...

编程日记 2025/8/22 9:05:02

kafka存储原理

topic分着存储在broker的分区中&#xff0c;分区进一步分为segment。 日志目录中的每一组文件都代表一个段。 段文件名中的后缀表示该段的基本偏移量。 log.segment.bytes表示分段的最大大小。 消息写入分区时&#xff0c;kafka会将这些消息写入段&#xff0c;写满了再创建一个…...

编程日记 2025/8/22 9:01:28

Arduino开发物联网ESP32快速入门指南（包含开发语言说明、学习路径和实战教程）

一、Arduino开发语言本质 核心语言&#xff1a;基于C/C的扩展语言&#xff0c;包含Arduino特有的API和库 特点&#xff1a; 去除了C的复杂特性&#xff08;如STL&#xff09; 内置硬件操作函数&#xff08;digitalWrite()、analogRead()等&#xff09; 支持面向对象编程&…...

编程日记 2025/8/22 8:59:44

《系统架构设计师教程（第2版）》第19章-大数据架构设计理论与实践-01-传统数据处理系统存在的问题

文章目录 1. 异步处理队列2. 数据库分区3 读写分离4. 基于Hadoop的 Map/Reduce 管道 1. 异步处理队列 出现的原因&#xff1a;用户访问量增加&#xff0c;数据库无法支撑用户请求的负载&#xff0c;导致数据库服务器无法及时响应用户请求解决&#xff1a;在Web服务器和数据库中…...

编程日记 2025/8/22 9:01:29

Vue接口平台学习五——测试环境页面

一、实现效果图及界面布局简单梳理 这块内容分左侧&#xff0c;中间&#xff0c;右侧三大部分 左侧&#xff1a; 上面一行固定内容&#xff0c;显示icon&#xff0c;名字&#xff0c;一个按钮。下面部分通过v-for循环读取数据库获取的测试环境列表用来展示名称。 中间&#…...

编程日记 2025/8/22 9:01:27

FFMpeg视频编码实战和音频编码实战

视频编码流程 avcodec_find_encoder&#xff1a;首先&#xff0c;通过指定的编码器名称&#xff08;如H.264、MPEG-4等&#xff09;找到对应的编码器。avcodec_alloc_context3&#xff1a;为找到的编码器分配一个上下文结构&#xff0c;这个结构包含了编码器所需的各种参数和状…...

编程日记 2025/8/21 18:14:27

vue+uniapp 获取上一页直接传递的参数

在小程序里页面之间跳转有时候需要传递参数给下个页面用 const toDetail item > { uni.navigateTo({ url: /pagesFood/stu/FoodSelection?groupCode1&merchCode2, }); }; 那么下个页面就要获取到这些参数&#xff0c;在实际开发中&#xff…...

编程日记 2025/8/22 2:02:32

各种排序思路及实现

目录 1.排序概念常见的排序算法 2.常见排序算法实现&#xff08;1&#xff09;插入排序直接插入排序希尔排序&#xff08;缩小增量排序&#xff09; &#xff08;2&#xff09;选择排序直接选择排序堆排序 &#xff08;3&#xff09;交换排序冒泡排序快速排序&#xff08;hoare…...

编程日记 2025/8/21 15:51:14

GPT文生图模型新玩法

GPT-4o发布了最新的生图模型GPT-4o-Image&#xff0c;在图像控制力、一致性上实现了显著提升&#xff0c;其表现甚至展现出超越Midjourney的潜力。这款模型不仅能读懂细致的指令&#xff0c;还能赋予照片艺术化的新生命。接下来&#xff0c;我们将介绍几个有趣的实践方向&#…...

编程日记 2025/8/21 18:05:19

uni-app ucharts自定义换行tooltips

实现效果&#xff1a; 第一步&#xff1a;在uni_modules文件夹下找到config-ucharts.js和u-charts.js文件 第二步&#xff1a;在config-ucharts.js文件中配置换行格式 // 换行格式"wrapTooltip":function(item, category, index, opts){return item.name&#xff1a;…...

编程日记 2025/8/22 9:00:49

java 集合进阶

双列集合 map 实例 package mymap;import java.util.HashMap; import java.util.Map;public class MapDemo1 {public static void main(String[] args) {/*V put(K key,v value)添加元素V remove(object key)根据键删除键值对元素void clear()移除所有的键值对元素boolean c…...

编程日记 2025/8/22 9:01:28

RPC 2025/4/8

RPC&#xff08;Remote Procedure Call&#xff09;&#xff0c;远程过程调用。 应用场景&#xff1a;大型微服务项目&#xff0c;服务部署到不同的服务器上&#xff0c;需要远程调用&#xff0c;可以使用RPC。 两个概念&#xff1a; 远程过程调用本地调用 RPC目的&#xff1a…...

编程日记 2025/8/22 9:02:58

浅层神经网络：全面解析（扩展）

浅层神经网络&#xff1a;全面解析&#xff08;扩展&#xff09; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 一、神经网络架构演进图谱 #mermaid-svg-…...

编程日记 2025/8/22 5:10:19

【Hadoop入门】Hadoop生态之ZooKeeper简介

1 什么是ZooKeeper&#xff1f; 在分布式系统的世界里&#xff0c;协调各节点之间的工作是一项复杂而关键的任务。ZooKeeper正是为解决这一问题而生的开源分布式协调服务&#xff0c;它像一个高效的"和事佬"&#xff0c;帮助分布式系统中的各个组件达成一致、同步状态…...

编程日记 2025/8/22 8:55:02

树和图论(详细整理，简单易懂！)

树和图论 树的遍历模版 #include <iostream> #include <cstring> #include <vector> #include <queue> // 添加queue头文件 using namespace std;const int MAXN 100; // 假设一个足够大的数组大小 int ls[MAXN], rs[MAXN]; // 定义左右子树数…...

编程日记 2025/8/22 8:57:13

CWGAN-GP 原理及实现（pytorch版）

CWGAN-GP 一、CWGAN-GP 原理1.1 CWGAN-GP 的核心改进1.2 CWGAN-GP 的损失函数1.3 CWGAN-GP 的优势1.4 关键参数选择1.5 应用场景 二、CWGAN-GP 实现2.1 导包2.2 数据加载和处理2.3 构建生成器2.4 构建判别器2.5 训练和保存模型2.6 查看训练损失2.7 图片转GIF2.8 模型加载和推理…...

编程日记 2025/8/21 22:45:37

zookeeper平滑扩缩容

在进行ZooKeeper的扩容和缩容操作时&#xff0c;需要注意以下几点&#xff1a; 数据一致性 重要性&#xff1a;ZooKeeper的核心特性之一是保证数据的一致性。在操作过程中&#xff0c;必须确保数据的一致性&#xff0c;以避免数据丢失或损坏。 实现方式&#xff1a;ZooKeeper通…...

编程日记 2025/8/21 17:33:15

Github 热点项目 ChartDB AI自动导表结构+迁移脚本，3分钟生成专业数据库关系图

ChartDB堪称数据库设计神器&#xff01;亮点①&#xff1a;动动手指输入SQL&#xff0c;秒出结构图&#xff0c;表关系一目了然&#xff0c;团队评审时再也不用画图两小时。亮点②&#xff1a;AI智能转换超贴心&#xff0c;MySQL转PostgreSQL只需点个按钮&#xff0c;跨平台迁移…...

编程日记 2025/8/21 15:08:24

RVOS-1.环境搭建与系统引导

0.环境搭建 riscv-operating-system-mooc: 开放课程《循序渐进&#xff0c;学习开发一个 RISC-V 上的操作系统》配套教材代码仓库。 mirror to https://github.com/plctlab/riscv-operating-system-mooc 在 Ubuntu 20.04 以上环境下我们可以直接使用官方提供的 GNU工具链和 QEM…...

编程日记 2025/8/17 6:55:16

Java List＜JSONObject＞ 转换为 List＜实体类＞

可以使用 Fastjson 的 toJavaObject 方法直接转换&#xff0c;无需中间序列化步骤。以下是具体实现和注意事项&#xff1a; import com.alibaba.fastjson.JSONObject; import java.util.List; import java.util.stream.Collectors;public class Converter {public static List…...

编程日记 2025/8/19 18:31:51

CesiumEarth v1.12 更新，支持安卓平板离线浏览3DTiles格式的三维倾斜模型

CesiumEarth v1.12 更新 2025年4月8日 阅读需 1 分钟 发布时间&#xff1a;2025年04月08日 新增用户登录&#xff1a;​ 从1.12版本开始需要通过登录方可使用CesiumEarth 账号可以通过邮箱免费注册 后续将陆续发布云服务相关的功能 发布Desktop版本&#xff1a;​ Deskt…...

编程日记 2025/8/20 19:37:06

OpenEuler运维实战-系统资源监控与性能优化-CPU·内存·IO

CPU 基本概念定界定位思路常用CPU性能分析工具 基本概念 中央处理器&#xff08;Central Processing Unit&#xff0c;简称CPU&#xff09;是计算机的主要设备之一&#xff0c;其功能是解释计算机指令以及处理计算机软件中的数据。 物理核&#xff1a;可以真实看到的CPU核&…...

编程日记 2025/8/22 9:00:16

react实现SVG地图区域中心点呈现圆柱体，不同区域数据不同，圆柱体高度不同

效果图&#xff1a; 代码&#xff1a; import React, { useState, useEffect } from react;const InnerMongoliaMap () > {// 每个区域的数据&#xff08;名称、中心坐标、圆柱体高度值&#xff09;const [regionData, setRegionData] useState([{ id: "呼和浩特市…...

编程日记 2025/8/20 8:18:20

Qwen - 14B 怎么实现本地部署，权重参数大小：21GB

Qwen - 14B 权重参数大小&#xff1a;21GB 参数量与模型占用存储空间&#xff08;GB&#xff09;是不同概念。Qwen - 14B参数量约140亿 。其模型大小在不同精度下占用存储空间不同&#xff0c;如在一些资料中提到&#xff0c;Qwen - 14B在特定情况下占用空间约21GB 。实际存储…...

编程日记 2025/8/20 15:41:18

线程实现参考资料

参考 并发编程系列 - Java线程池监控及CompletableFuture详解_taskexecutor.execute没有执行如何监控到-CSDN博客 JAVA异步实现的四种方式_java异步编程的四种方法-CSDN博客 Java线程池深度解析与自定义实战-CSDN博客 Java8 CompletableFuture 异步多线程的实现_java_脚本之…...

编程日记 2025/8/21 10:46:37

python-63-前后端分离之图书管理系统的Flask后端

文章目录 1 flask后端1.1 数据库实例extension.py1.2 数据模型models.py1.3 .flaskenv1.4 app.py1.5 运行1.6 测试链接2 关键函数和文件2.1 请求视图类MethodView2.2 .flaskenv文件3 参考附录基于flask形成了图书管理系统的后端，同时对其中使用到的关键文件.flaskenv和函数类M…...

编程日记 2025/8/21 17:52:14

Qt网络编程之服务端

Qt网络编程之服务端 TCP&#xff08;传输控制协议&#xff09;是一种可靠的、面向流的、面向连接的传输协议。它特别适合连续的数据传输。 1. 主要类和函数 1.1 QTcpServer 监听函数&#xff1a; bool QTcpServer::listen(const QHostAddress &address QHostAddress::…...

编程日记 2025/8/19 17:25:15

案例-流量统计

1.建一个data目录&#xff0c;在data下建log.txt文件 输入手机号码 上行流量 下行流量 2.在com.example.flow下建四个Java类3.flowBean flowMapper flowReducer flowDriver...

编程日记 2025/8/21 10:55:10

开源身份和访问管理方案之keycloak（二）管理员引导和恢复

文章目录 开源身份和访问管理方案之keycloak&#xff08;二&#xff09;管理员引导和恢复管理员引导和恢复在 Keycloak 启动时引导临时管理员帐户对于恢复丢失的管理员访问权限使用专用命令引导管理员用户或服务帐户创建一个管理员用户创建一个服务账号重新获得对具有更高安全性…...

编程日记 2025/8/20 16:59:05

TCP,UDP协议和域名地址

1.TCP&#xff08;传输控制协议&#xff09;是面向连接&#xff0c;UDP&#xff08;用户数据报协议&#xff09;是无连接的 2.应用层&#xff1a;FTP,HTTP,SMTP,TELNET,DNS,TFTP 传输层;TCP,UDP 网际层&#xff1a;IP,ICMP,ARP,RARP 3.TCP21:20端口数据传输&#xff1b;21端…...

编程日记 2025/8/20 21:57:35

算法进阶指南 分形

问题描述 分形&#xff0c;具有以非整数维形式充填空间的形态特征。通常被定义为&#xff1a; “一个粗糙或零碎的几何形状&#xff0c;可以分成数个部分&#xff0c;且每一部分都&#xff08;至少近似地&#xff09;是整体缩小后的形状”&#xff0c;即具有自相似的性质。 现…...

编程日记 2025/8/20 20:12:43

2025年 npm淘宝镜像最新地址

查看当前镜像 npm config get registry 切换陶宝镜像源 npm config set registry https://registry.npmmirror.com/ 验证npm镜像源是否切换成功 npm config get registry 如果返回的地址是https://registry.npmmirror.com/&#xff0c;那么说明你已经成功切换到淘宝的npm…...

编程日记 2025/8/20 7:46:25

0基础 | 硬件 | LM386芯片

LM386芯片&#xff1a;音频功率放大器芯片 内部集成三极管功能将微弱信号放大20-200倍&#xff0c;并且驱动内阻为8Ω的扬声器注意CD系列芯片&#xff0c;内部集成MOS管 LM386特性 LM386主要由以下三个部分组成 内部电路 差分输入 差分输入 多个三极管左右对称&#xff0c;形…...

编程日记 2025/8/21 14:46:46