vue中预览docx、xlsx、pptx、pdf

前言:其实本来是要做全类型文件预览的,但是一直找不到合适的doc,xlx,ppt预览插件。要是有可以使用的,可以评论推荐给我

我使用的node版本:v18.19.1

参考官网:preview 文件预览 | ran

引入方式:

//安装组件
npm install ranui --save
//在需要的页面引入即可
import 'ranui/button';
import 'ranui/preview';
import 'ranui/style';
//使用方式<div class="preview-container"><div id="showPreview" class="preview"></div><r-preview :src="url" closeable="false"></r-preview>
</div>

我这里多了个showPreview用来处理ppt的预览,因为他原生的ppt预览是增加一个弹窗,我需要当前页面展示,样式不符合要求,我就修改了,\node_modules\ranui\dist\components\preview\index.js  里对应第一个文件

修改如下:

var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);return value;
};
import { n as noop } from "./index-7913ec46.js";
import "./index-7216d6b0.js";
import { m as message } from "./index-0d5b9435.js";
const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.r-preview-slot{display:block}:host{cursor:pointer}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-loading{position:absolute;top:30vh;left:50vw;transform:translate(-50%);display:flex;flex-flow:column;align-items:center}.r-preview-mask .r-preview-loading-text{color:#fff;font-size:16px}.r-preview-mask .r-preview-options{width:100%;pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;-webkit-user-select:none;user-select:none}.r-preview-mask .r-preview-contain{max-width:calc(100vw - 20px);margin:0 auto;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{margin:0 auto;height:calc(100vh - 68px);display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:center;overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main{width:100%;height:100%;margin-bottom:10px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet{font-size:13px;line-height:normal;-webkit-user-select:none;user-select:none;-moz-user-select:none;font-family:Lato,Source Sans Pro,Roboto,Helvetica,Arial,sans-serif;box-sizing:content-box;background:#fff;-webkit-font-smoothing:antialiased}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet textarea{font:400 13px Arial,Lato,Source Sans Pro,Roboto,Helvetica,sans-serif}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-sheet{position:relative;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-table{vertical-align:bottom}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-tooltip{font-family:inherit;position:absolute;padding:5px 10px;color:#fff;border-radius:1px;background:#000000;font-size:12px;z-index:201}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-tooltip:before{pointer-events:none;position:absolute;left:calc(50% - 4px);top:-4px;content:"";width:8px;height:8px;background:inherit;-webkit-transform:rotate(45deg);transform:rotate(45deg);z-index:1;box-shadow:1px 1px 3px -1px #0000004d}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-color-palette{padding:5px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-color-palette table{margin:0;padding:0;border-collapse:separate;border-spacing:2;background:#fff}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-color-palette table td{margin:0;cursor:pointer;border:1px solid transparent}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-color-palette table td:hover{border-color:#ddd}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-color-palette table td .x-spreadsheet-color-palette-cell{width:16px;height:16px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette{padding:6px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette table{margin:0;padding:0;border-collapse:separate;border-spacing:0;background:#fff;table-layout:fixed}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette table td{margin:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left{border-right:1px solid #eee;padding-right:6px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell{width:30px;height:30px;cursor:pointer;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette .x-spreadsheet-border-palette-left .x-spreadsheet-border-palette-cell:hover{background-color:#eee}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right{padding-left:6px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-border-palette .x-spreadsheet-border-palette-right .x-spreadsheet-line-type{position:relative;left:0;top:-3px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown{position:relative}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown .x-spreadsheet-dropdown-content{position:absolute;z-index:200;background:#fff;box-shadow:1px 2px 5px 2px #33333326}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown.bottom-left .x-spreadsheet-dropdown-content{top:calc(100% + 5px);left:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown.bottom-right .x-spreadsheet-dropdown-content{top:calc(100% + 5px);right:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown.top-left .x-spreadsheet-dropdown-content{bottom:calc(100% + 5px);left:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown.top-right .x-spreadsheet-dropdown-content{bottom:calc(100% + 5px);right:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dropdown .x-spreadsheet-dropdown-title{padding:0 5px;display:inline-block}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer{position:absolute;z-index:11}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer .x-spreadsheet-resizer-hover{background-color:#4b89ff40}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer .x-spreadsheet-resizer-line{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer.horizontal{cursor:row-resize}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer.horizontal .x-spreadsheet-resizer-line{border-bottom:2px dashed #4b89ff;left:0;bottom:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer.vertical{cursor:col-resize}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-resizer.vertical .x-spreadsheet-resizer-line{border-right:2px dashed #4b89ff;top:0;right:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-scrollbar{position:absolute;bottom:0;right:0;background-color:#f4f5f8;opacity:.9;z-index:12}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-scrollbar.horizontal{right:15px;overflow-x:scroll;overflow-y:hidden}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-scrollbar.horizontal>div{height:1px;background:#ddd}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-scrollbar.vertical{bottom:15px;overflow-x:hidden;overflow-y:scroll}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-scrollbar.vertical>div{width:1px;background:#ddd}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-overlayer{position:absolute;left:0;top:0;z-index:10}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-overlayer .x-spreadsheet-overlayer-content{position:absolute;overflow:hidden;pointer-events:none;width:100%;height:100%}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-editor,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector{box-sizing:content-box;position:absolute;overflow:hidden;pointer-events:none;top:0;left:0;width:100%;height:100%}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .hide-input{position:absolute;z-index:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .hide-input input{padding:0;width:0;border:none!important}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .x-spreadsheet-selector-area{position:absolute;border:2px solid #4b89ff;background:rgba(75,137,255,.1);z-index:5}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .x-spreadsheet-selector-clipboard,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .x-spreadsheet-selector-autofill{position:absolute;background:transparent;z-index:100}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .x-spreadsheet-selector-clipboard{border:2px dashed #4b89ff}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .x-spreadsheet-selector-autofill{border:1px dashed rgba(0,0,0,.45)}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-selector .x-spreadsheet-selector-corner{pointer-events:auto;position:absolute;cursor:crosshair;font-size:0;height:5px;width:5px;right:-5px;bottom:-5px;border:2px solid #ffffff;background:#4b89ff}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-editor{z-index:20}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-editor .x-spreadsheet-editor-area{position:absolute;text-align:left;border:2px solid #4b89ff;line-height:0;z-index:100;pointer-events:auto}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-editor .x-spreadsheet-editor-area textarea{box-sizing:content-box;border:none;padding:0 3px;outline:none;resize:none;text-align:start;overflow-y:hidden;font:400 13px Arial,Lato,Source Sans Pro,Roboto,Helvetica,sans-serif;color:inherit;white-space:normal;word-wrap:break-word;line-height:22px;margin:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-editor .x-spreadsheet-editor-area .textline{overflow:hidden;visibility:hidden;position:fixed;top:0;left:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item{-webkit-user-select:none;user-select:none;background:0;border:1px solid transparent;outline:none;height:26px;color:#000000e6;line-height:26px;list-style:none;padding:2px 10px;cursor:default;text-align:left;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item.disabled{pointer-events:none;opacity:.5}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item:hover,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item.active{background:rgba(0,0,0,.05)}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item.divider{height:0;padding:0;margin:5px 0;border:none;border-bottom:1px solid rgba(0,0,0,.1)}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item .label{float:right;opacity:.65;font-size:1em}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item.state,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-header.state{padding-left:35px!important;position:relative}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item.state:before,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-header.state:before{content:"";position:absolute;width:10px;height:10px;left:12px;top:calc(50% - 5px);background:rgba(0,0,0,.08);border-radius:2px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-item.state.checked:before,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-header.state.checked:before{background:#4b89ff}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-checkbox{position:relative;display:inline-block;backface-visibility:hidden;outline:0;vertical-align:baseline;font-style:normal;font-size:1rem;line-height:1em}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-checkbox>input{position:absolute;top:0;left:0;opacity:0!important;outline:0;z-index:-1}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-suggest,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-contextmenu,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-sort-filter{position:absolute;box-shadow:1px 2px 5px 2px #33333326;background:#fff;z-index:100;width:260px;pointer-events:auto;overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-suggest{width:200px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-filter{border:1px solid #e9e9e9;font-size:12px;margin:10px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-filter .x-spreadsheet-header{padding:.5em .75em;background:#f8f8f9;border-bottom:1px solid #e9e9e9;border-left:1px solid transparent}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-filter .x-spreadsheet-body{height:200px;overflow-y:auto}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-filter .x-spreadsheet-body .x-spreadsheet-item{height:20px;line-height:20px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-sort-filter .x-spreadsheet-buttons{margin:10px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-bottombar{height:40px;padding:0 30px;text-align:left;background:#f5f6f7;display:flex}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-bottombar{position:relative;border-top:1px solid #e0e2e4}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-bottombar .x-spreadsheet-menu>li{line-height:40px;height:40px;padding-top:0;padding-bottom:0;vertical-align:middle;border-right:1px solid #e8eaed}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-menu{list-style:none;margin:0;padding:0;-webkit-user-select:none;user-select:none}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-menu>li{float:left;line-height:1.25em;padding:.785em 1em;margin:0;vertical-align:middle;text-align:left;font-weight:400;color:#80868b;white-space:nowrap;cursor:pointer;transition:all .3s;font-weight:700}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-menu>li.active{background-color:#fff;color:#000000a6}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-menu>li .x-spreadsheet-dropdown{display:inline-block}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print{position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print-bar{background:#424242;height:60px;line-height:60px;padding:0 30px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print-bar .-title{color:#fff;font-weight:700;font-size:1.2em;float:left}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print-bar .-right{float:right;margin-top:12px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print-content{display:flex;flex:auto;flex-direction:row;background:#d0d0d0;height:calc(100% - 60px)}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print-content .-sider{flex:0 0 300px;width:300px;border-left:2px solid #ccc;background:#fff}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-print-content .-content{flex:auto;overflow-x:auto;overflow-y:scroll;height:100%}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-canvas-card-wraper{margin:40px 20px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-canvas-card{background:#fff;margin:auto;page-break-before:auto;page-break-after:always;box-shadow:0 8px 10px 1px #00000024,0 3px 14px 3px #0000001f,0 4px 5px #0003}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar{color:#000000a6;background:#ffffff;-webkit-user-select:none;user-select:none}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-header{font-weight:700;line-height:30px;text-align:center;width:100%;float:left;background:#f9fafb}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-header .calendar-header-left{padding-left:5px;float:left}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-header .calendar-header-right{float:right}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-header .calendar-header-right a{padding:3px 0;margin-right:2px;border-radius:2px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-header .calendar-header-right a:hover{background:rgba(0,0,0,.08)}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body{border-collapse:collapse;border-spacing:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body th,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body td{width:14.28571429%;min-width:32px;text-align:center;font-weight:700;line-height:30px;padding:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body td>.cell:hover{background:#ecf6fd}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body td>.cell.active,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body td>.cell.active:hover{background:#ecf6fd;color:#2185d0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-calendar .calendar-body td>.cell.disabled{pointer-events:none;opacity:.5}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-datepicker{box-shadow:2px 2px 5px #0003;position:absolute;left:0;top:calc(100% + 5px);z-index:10;width:auto}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-buttons{display:flex;justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-buttons .x-spreadsheet-button{margin-left:8px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-button{display:inline-block;border-radius:3px;line-height:1em;min-height:1em;white-space:nowrap;text-align:center;cursor:pointer;font-size:1em;font-weight:700;padding:.75em 1em;color:#0009;background:#e0e1e2;text-decoration:none;font-family:Lato,proxima-nova,Helvetica Neue,Arial,sans-serif;outline:none;vertical-align:baseline;zoom:1;-webkit-user-select:none;user-select:none;transition:all .1s linear}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-button.active,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-button:hover{background-color:#c0c1c2;color:#000c}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-button.primary{color:#fff;background-color:#2185d0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-button.primary:hover,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-button.primary.active{color:#fff;background-color:#1678c2}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-input{font-size:1em;position:relative;font-weight:400;display:inline-flex;color:#000000de}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-input input{z-index:1;margin:0;max-width:100%;flex:1 0 auto;outline:0;-webkit-tap-highlight-color:rgba(255,255,255,0);text-align:left;line-height:30px;height:30px;padding:0 8px;background:#fff;border:1px solid #e9e9e9;border-radius:3px;transition:box-shadow .1s ease,border-color .1s ease;box-shadow:inset 0 1px 2px #0a0a0a0f}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-input input:focus{border-color:#4b89ff;box-shadow:inset 0 1px 2px #4b89ff33}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-select{position:relative;display:inline-block;background:#fff;border:1px solid #e9e9e9;border-radius:2px;cursor:pointer;color:#000000de;-webkit-user-select:none;user-select:none;box-shadow:inset 0 1px 2px #0a0a0a0f}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-select .input-text{text-overflow:ellipsis;white-space:nowrap;min-width:60px;width:auto;height:30px;line-height:30px;padding:0 8px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-fields{display:flex;flex-direction:row;flex-wrap:wrap}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-fields .x-spreadsheet-form-field{flex:0 1 auto}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-fields .x-spreadsheet-form-field .label{display:inline-block;margin:0 10px 0 0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-field{display:block;vertical-align:middle;margin-left:10px;margin-bottom:10px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-field:first-child{margin-left:0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-field.error .x-spreadsheet-form-select,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-field.error input{border-color:#f04134}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-form-field .tip{color:#f04134;font-size:.9em}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dimmer{display:none;position:absolute;top:0!important;left:0!important;width:100%;height:100%;text-align:center;vertical-align:middle;background-color:#0009;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.5s;animation-duration:.5s;transition:background-color .5s linear;-webkit-user-select:none;user-select:none;z-index:1000}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-dimmer.active{display:block;opacity:1}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main form fieldset{border:none}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main form fieldset label{display:block;margin-bottom:.5em;font-size:1em;color:#666}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main form fieldset select{font-size:1.1em;width:100%;background-color:#fff;border:none;border-bottom:2px solid #ddd;padding:.5em .85em;border-radius:2px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-modal,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-toast{font-size:13px;position:fixed;z-index:1001;text-align:left;line-height:1.25em;min-width:360px;color:#000000de;font-family:Lato,Source Sans Pro,Roboto,Helvetica,Arial,sans-serif;border-radius:4px;border:1px solid rgba(0,0,0,.1);background-color:#fff;background-clip:padding-box;box-shadow:#0003 0 2px 8px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-toast{background-color:#ffffffd9}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-modal-header,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-toast-header{font-weight:600;background-clip:padding-box;background-color:#ffffffd9;border-bottom:1px solid rgba(0,0,0,.05);border-radius:4px 4px 0 0}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-toast-header{color:#f2711c}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-modal-header{border-bottom:1px solid #e0e2e4;background:rgba(0,0,0,.08);font-size:1.0785em}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-modal-header,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-modal-content,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-toast-header,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-toast-content{padding:.75em 1em}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-excel-main .x-spreadsheet-menu li:first-child{display:none}.r-preview-mask .r-preview-contain .r-preview-context .docx-wrapper{background:none}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section table,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section th,.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context .r-preview-pptx-main section svg.drawing{position:absolute;overflow:visible}\n';
const index$2 = "";
const { warning = noop } = message;
const PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
const PDF = "application/pdf";
const DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
const XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
const XLS = "application/vnd.ms-excel";
async function Custom() {if (typeof document !== "undefined" && !customElements.get("r-preview") && true) {const { renderPptx } = await import("./index-7b8840f9.js");const { renderDocx } = await import("./docx-c5d02d8c.js");const { renderPdf } = await import("./pdf-bdb7818a.js");const { renderExcel } = await import("./index-c14450a9.js");const requestUrlToBuffer = (src, options) => {if (typeof XMLHttpRequest === "undefined") {throw new Error("XMLHttpRequest is not defined");}if (typeof document === "undefined") {return Promise.reject("document is not defined");}return new Promise(function(resolve, reject) {const xhr = new XMLHttpRequest();xhr.open(options.method || "GET", src, true);xhr.responseType = options.responseType || "arraybuffer";xhr.onload = function() {if (xhr.status === 200) {resolve({ success: true, data: xhr.response, message: "" });} else {reject({success: false,data: xhr.status,message: `The request status is${xhr.status}`});}};xhr.onerror = function(e) {reject({ success: false, data: e, message: `` });};xhr.onprogress = (event) => {options.onProgress && options.onProgress(event);};xhr.withCredentials = options.withCredentials || false;if (options.headers) {Object.keys(options.headers).forEach(function(key) {(options == null ? void 0 : options.headers) && xhr.setRequestHeader(key, options.headers[key]);});}xhr.send(options.body);});};const renderPpt = (file, dom) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = () => {var _a;if (reader.result && dom) {const param = {pptx: reader.result,resultElement: dom};(_a = renderPptx(param)) == null ? void 0 : _a.then(() => {resolve();});}};reader.onerror = (error) => {reject(error);};reader.onabort = (abort) => {reject(abort);};});};const renderWord = (file, dom) => {return Promise.resolve().then(() => renderDocx({ buffer: file, bodyContainer: dom }));};const renderFileMap = /* @__PURE__ */ new Map([[PDF, renderPdf],[PPTX, renderPpt],[DOCX, renderWord],[XLSX, renderExcel],[XLS, renderExcel]]);class CustomElement extends HTMLElement {constructor() {super();__publicField(this, "_loadingText");__publicField(this, "preview");__publicField(this, "previewContext");__publicField(this, "_slot");__publicField(this, "_div");__publicField(this, "_loadingElement");__publicField(this, "createLoading", () => {this._loadingElement = document.createElement("div");this._loadingElement.setAttribute("class", "r-preview-loading");const icon = document.createElement("r-icon");icon.setAttribute("name", "loading");icon.setAttribute("size", "100");icon.setAttribute("color", "#1E90FF");icon.setAttribute("spin", "");this._loadingText = document.createElement("div");this._loadingElement.appendChild(icon);this._loadingText.setAttribute("class", "r-preview-loading-text");this._loadingElement.appendChild(this._loadingText);return this._loadingElement;});__publicField(this, "onProgress", (event) => {const num = event.loaded / event.total * 100;const progress = Math.min(99, num).toFixed(2) + "%";if (this._loadingText && this._loadingElement) {this._loadingText.innerText = `Loading ${progress}`;if (num >= 100) {setTimeout(() => {var _a;(_a = this.preview) == null ? void 0 : _a.removeChild(this._loadingElement);}, 300);}}});__publicField(this, "handleFile", async (file) => {try {if (typeof file === "string") {const { success, data, message: message2 } = await requestUrlToBuffer(file, {onProgress: this.onProgress,responseType: "blob"});if (success && data) {file = new File([data], data.name, { type: data.type });const { type } = file;const handler = renderFileMap.get(type);if (handler && this.previewContext) {if (type === XLSX || type === XLS) {this.previewContext.style.setProperty("width", "100%");} else {this.previewContext.style.setProperty("width", "100%");}handler(file, this.previewContext);}} else {warning(message2);}}} catch (error) {}});__publicField(this, "closePreview", () => {if (this.preview) {document.body.removeChild(this.preview);this.preview = void 0;}});__publicField(this, "showPreview", () => {var _a;if (this.src) {if (this.preview) {this.preview.style.display = "block";} else {this.preview = document.createElement("div");this.preview.setAttribute("class", "r-preview-mask");this.preview.setAttribute("id", "r-preview-mask");const previewOption = document.createElement("div");previewOption.setAttribute("class", "r-preview-options");if (this.closeable !== "false") {const previewCloseButton = document.createElement("r-icon");previewCloseButton.setAttribute("class","r-preview-options-close");previewCloseButton.setAttribute("name", "close-circle-fill");previewCloseButton.setAttribute("size", "40");previewCloseButton.addEventListener("click", this.closePreview);previewOption.appendChild(previewCloseButton);}const previewContain = document.createElement("div");previewContain.setAttribute("class", "r-preview-contain");this.previewContext = document.createElement("div");this.previewContext.setAttribute("class", "r-preview-context");previewContain.appendChild(this.previewContext);this.preview.appendChild(previewOption);(_a = this.preview) == null ? void 0 : _a.appendChild(previewContain);this._loadingElement = this.createLoading();this.preview.appendChild(this._loadingElement);document.getElementById('showPreview').appendChild(this.preview);// document.body.appendChild(this.preview);}this.handleFile(this.src);}});this._div = document.createElement("div");this.preview = document.getElementById("r-preview-mask");this._slot = document.createElement("slot");this._div.appendChild(this._slot);this._slot.setAttribute("class", "r-preview-slot");this._div.setAttribute("class", "r-preview");const shadowRoot = this.attachShadow({ mode: "closed" });const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);shadowRoot.appendChild(this._div);}static get observedAttributes() {return ["src", "closeable"];}get label() {return this.getAttribute("label");}set label(value) {if (value)this.setAttribute("label", value);}get src() {return this.getAttribute("src");}set src(value) {if (value)this.setAttribute("src", value);}get closeable() {return this.getAttribute("closeable");}set closeable(value) {if (value)this.setAttribute("closeable", value);}connectedCallback() {this.preview = document.getElementById("r-preview-mask");this.addEventListener("click", this.showPreview);}disconnectedCallback() {this.removeEventListener("click", this.showPreview);}attributeChangedCallback(name, oldValue, newValue) {if (newValue !== oldValue) {if (name === "src" && newValue) {this.setAttribute("src", newValue);this.showPreview();}}}}customElements.define("r-preview", CustomElement);}
}
const index = Custom();
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({__proto__: null,default: index
}, Symbol.toStringTag, { value: "Module" }));
export {index as a,index$1 as i
};

以及一点点的样式修改

<style lang="scss">/*deep*/#r-preview-mask{position: static;width: calc(100vw - 230px);/* margin-left: 210px; */height: 100%;&>section{width: 100% !important;}}
</style>

好像是pdf在预览时样式很奇怪:所以pdf我是通过ifream进行预览

 <iframe :src="url" class="pdfBox"></iframe>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/309415.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记之——3DGS-SLAM系列代码解读

最近对一系列基于3D Gaussian Splatting&#xff08;3DGS&#xff09;SLAM的工作的源码进行了测试与解读。为此写下本博客mark一下所有的源码解读以及对应的代码配置与测试记录~ 其中工作1~5的原理解读见博客&#xff1a; 学习笔记之——3D Gaussian Splatting及其在SLAM与自动…

Qt 中默认代码

目录 主函数 widget的声明 widget的定义 form file .pro 文件 主函数 #include "widget.h" ​ #include <QApplication> ​ int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 上面就是 Qt 刚创建的一…

非关系型数据库(缓存数据库)redis的集群

目录 一.群集模式——Cluster 1.原理 2.作用 3.特点 4.工作机制 哈希槽 哈希槽的分配 哈希槽可按照集群主机数平均分配&#xff08;默认分配&#xff09; 根据主机的性能以及功能自定义分配 redis集群的分片 分片 如何找到给定key的分片 优势 二. 搭建Redis群集…

JVM虚拟机(五)强引用、软引用、弱引用、虚引用

目录 一、强引用二、软引用三、弱引用四、虚引用五、总结 引文&#xff1a; 在 Java 中一共存在 4 种引用&#xff1a;强、软、弱、虚。它们主要指的是&#xff0c;在进行垃圾回收的时候&#xff0c;对于不同的引用垃圾回收的情况是不一样的。下面我们就一起来看一下这 4 种引用…

基于R语言实现的负二项回归模型【理解与实现】-理解负二项回归模型和泊松回归模型之间的区别

前言 我们可以在R语言中使用MASS包中的glm.nb函数来拟合负二项模型&#xff0c;以及使用glm函数来拟合泊松模型。以下是一个详细的过程&#xff0c;包括模拟数据的生成、模型的拟合、结果的比较和解释。 需要的包 if (!require("MASS")) install.packages("M…

Linux网络基础 (二) ——(IP、MAC、端口号、TCPUDP协议、网络字节序)

文章目录 IP 地址基本概念源IP地址 & 目的IP地址 MAC 地址基本概念源MAC地址 & 目的MAC地址 端口号基本概念源端口号 & 目的端口号 TCP & UDP 协议基本概念TCP 与 UDP 的抉择 网络字节序大端、小端字节序 &#x1f396; 博主的CSDN主页&#xff1a;Ryan.Alask…

YOLOv8模型剪枝实战:DepGraph(依赖图)方法

课程链接&#xff1a;YOLOv8模型剪枝实战&#xff1a;DepGraph(依赖图)方法_在线视频教程-CSDN程序员研修院 YOLOv8是一个当前非常流行的目标检测器&#xff0c;本课程使用DepGraph&#xff08;依赖图&#xff09;剪枝方法对YOLOv8进行网络剪枝&#xff0c;使其更加轻量和实用…

Qt快速入门(MV架构之TableView + QStandardItemModel + 自定义代理小案例)

Qt快速入门&#xff08;MV架构之TableView QStandardItemModel 自定义代理小案例&#xff09; 关于MV架构的简单介绍 在Qt框架中&#xff0c;代理&#xff08;Delegate&#xff09;、模型&#xff08;Model&#xff09;和视图&#xff08;View&#xff09;之间的关系构成了…

51单片机实验03-单片机定时/计数器实验

目录 一、实验目的 二、实验说明 1、51单片机有两个16位内部计数器/定时器&#xff08;C/T&#xff0c; Counter/Timer&#xff09;。 2、模式寄存器TMOD 1) M1M0工作模式控制位&#xff1b; 2) C/T定时器或计数器选择位&#xff1a; 3&#xff09;GATE定时器/计数器运行…

Python零基础从小白打怪升级中~~~~~~~模块+异常+Pycharm的debug调试

第十节&#xff1a;模块异常Debug 一、Python模块 Python 模块(Module)&#xff0c;是一个 Python 文件&#xff0c;以 .py 结尾&#xff0c;模块能定义函数&#xff0c;类和变量&#xff0c;模块里也能包含可执行的代码。 1、导入模块 导入模块的5中方式 import 模块名fr…

C++ 之 【类与对象】从入门到精通一条龙服务 最终篇(static成员、友元、匿名对象。。。)

&#x1f4b4;到用时方恨早&#xff0c;白首方悔挣的少 车到山前没有路&#xff0c;悬崖勒马勒不住 一、再谈构造函数 1.构造函数体赋值 2.初始化列表 3.explicit关键字 二、Static成员 1.概念 2.特性 三、友元 1.友元函数 2.友元类 四、内部类 五、匿名对象 六、…

结合 tensorflow.js 、opencv.js 与 Ant Design 创建美观且高性能的人脸动捕组件并发布到InsCode

系列文章目录 如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图tensorflow.js 使用 opencv.js 将人脸…

模型预测控制MPC(1)—— 基础概念

文章目录 1. 历史沿革1.1 控制论1.2 最优控制与强化学习 2. 模型预测控制 1. 历史沿革 我本科做机器人的时候接触过一点控制&#xff0c;主要做了大量 PID 在嵌入式控制系统的应用&#xff1b;硕士期间研究方向是强化学习。在我调研 MPC 的过程中&#xff0c;发现它同时出现在…

云笔记小程序的实现

1.前言 云笔记, 是基于HotApp小程序统计云后台提供的api接口开发的一个微信小程序。 2.功能 离线保存笔记 云端数据同步, 更换了设备也可以找到以前的笔记 接入了好推二维码提供的数据统计工具, 可以到平台上查看用户分析、留存分析、事件分析。 3.界面效果 ***HotApp云笔…

Redis Pipelining 底层原理分析及实践

作者&#xff1a;vivo 互联网服务器团队-Wang Fei Redis是一种基于客户端-服务端模型以及请求/响应的TCP服务。在遇到批处理命令执行时&#xff0c;Redis提供了Pipelining(管道)来提升批处理性能。本文结合实践分析了Spring Boot框架下Redis的Lettuce客户端和Redisson客户端对…

行云堡垒国密算法应用与信创支持

一、 国密算法和信创的介绍 1.1 什么是国密算法 国密算法是国家密码管理局制定颁布的一系列的密码标准&#xff0c;即已经被国家密码局认定的国产密码算法&#xff0c;又称商用密码&#xff08;是指能够实现商用密码算法的加密&#xff0c;解密和认证等功能的技术&#xff09;…

excel里如何的科学计数法的数字转换成数值?

比如下图&#xff0c;要想把它们转换成3250跟1780&#xff0c;有什么快捷的办法吗&#xff1f; 科学计数法在excel里的格式&#xff0c;与我们常规在数学上写的有差异。这个转换可以这样做&#xff1a; 1.转换后的效果&#xff1a; 2.问题分析 题目中所附截图&#xff0c;单元…

Day96:云上攻防-云原生篇Docker安全系统内核版本漏洞CDK自动利用容器逃逸

目录 云原生-Docker安全-容器逃逸&系统内核漏洞 云原生-Docker安全-容器逃逸&docker版本漏洞 CVE-2019-5736 runC容器逃逸(需要管理员配合触发) CVE-2020-15257 containerd逃逸(启动容器时有前提参数) 云原生-Docker安全-容器逃逸&CDK自动化 知识点&#xff1…

Redis入门到通关之Set命令

文章目录 ⛄ 概述⛄ Set类型的常见命令⛄RedisTemplate API❄️❄️ 添加Set缓存(值可以是一个&#xff0c;也可是多个)❄️❄️设置过期时间(单独设置)❄️❄️根据key获取Set中的所有值❄️❄️根据value从一个set中查询,是否存在❄️❄️获取Set缓存的长度❄️❄️移除指定的…

云服务器安装Mysql、MariaDB、Redis、tomcat

前置工作 进入根目录 cd / 进入/user/local文件夹 上传压缩包 rz 压缩包 Mysql 1.下载并安装MySQL官方的 Yum Repository wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum install mysql-…