div中显示<script>...</script>标签内容并部分文字标红

最新推荐文章于 2023-10-13 15:08:32 发布
最新推荐文章于 2023-10-13 15:08:32 发布
阅读量3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/apple_wheat/article/details/75387139
本文介绍了一种在网页中完整显示&lt;script&gt;标签内容的方法，利用&lt;xmp&gt;标签配合JavaScript或者直接使用转义字符并添加样式来实现目标文本的展示与标红。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写图片描述

以上为要求的具体实现效果……

  1. 显示<script>标签的div的设置：
    <xmp></xmp>标签可以控制完全显示标签之内的内容，包含标签全部显示为文本内容。
    这种情况下需要配合js进行目标内容的选取；而使用转义字符并在目标文本上加样式则直接达成目标，。
    这里写图片描述
  2. 准备使用js选中标签中的部分内容进行标红：
    这里写图片描述
    上图是失败尝试中的收获，第一种方法可以获取整个div中的内容，第二种则可以定向到目标文本，例如‘项目ID’。
Vue - 搜索关键字标红高亮（用户输入关键词搜索后，在搜索结果的列表标题上匹配并标红加粗）怎么使内容文本标红高亮的最详细教程，Nuxt.js uni-app 也适用，搜索功能及搜索结果关键字高亮源码
资深程序员
04-06 5584
Vue如何实现搜索结果高亮显示关键字，Vue.jsNuxt.jsuni-app关键字搜索高亮标红，vue实现搜索关键词高亮的详细教程，如何实现列表按照关键字改变颜色高亮红色，vue中搜索关键词,使文本标红，vueelementui搜索关键字高亮，基于vue实现搜索高亮关键字，Vue搜索功能及搜索结果关键字高亮，js点击搜索,内容关键字标红，通过query传参实现搜索和关键字高亮，Vue-搜索关键字标红高亮（用户输入关键词搜索后，在搜索结果的列表标题上匹配并标红加粗）怎么使内容文本标红高亮
利用 javascript 实现富文本编辑器
ItStar
11-22 6301
近期项目中需要开发一个兼容PC和移动端的富文本编辑器，其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器，桌面端的很多，移动端的几乎没有。桌面端以UEditor为代表。但是我们并不打算考虑兼容性，所以没有必要采用UEditor这么重的插件。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的bug。 准备阶段 在现代浏览器
深入理解javascript中的富文本编辑
weixin_33943347的博客
09-19 229
前面的话 　　一说起富文本，人们第一印象就是像使用word一样，在网页上操作文档。实际上差不多就是这样。富文本编辑，又称为WYSIWYG (What You See Is What You Get所见即所得)，指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑   方式 　　有两种编辑富文本的方式，一种是使用iframe元素，另一种是使用contentedi...
【JavaScript】富文本编辑器UEditor与代码高亮插件SyntaxHighlighter整合，实现用户贴代码功能
编程记录，亲测有效
09-18 8766
在《【JavaScript】网页中对代码的处理，代码高亮插件SyntaxHighlighter》（点击打开链接）已经提及到，国内著名，完美兼容IE6的富文本编辑器UEditor已经自然整合代码高亮插件SyntaxHighlighter插件了，那么如何实现用户贴代码功能呢？ 值得注意的是，单纯的富文本编辑器UEditor写一段代码，是无法实现如代码高亮插件SyntaxHighlighter带行号、
script代码片段放在html里不会报错，复制粘贴到js里var，if，分号都红了。什么情况
wuwei1030688933的博客
12-03 138
js里面：各种红，第一次写js，不知道啥情况。有大哥知道吗。。
如何正确的在div里引入script标签
weixin_46037501的博客
05-17 2441
项目场景： 提示：这里简述项目相关背景： 项目场景：在页面展示<script src=‘https://www.antdv.com/components/overview-cn/’>< /script> 问题描述 提示：这里描述项目中遇到的问题： 直接引入div里会直接报错在data里定义一个方法同样也会报错同一问题 <pre class="hlcode"><script src='https://cssmx.jst.zj.gov.cn/jsapi/dplus.j
<blocked>false</blocked>标红
04-03
如果在同一文件中有其他语法错误（如括号不匹配、分号遗漏等），可能导致解析中断，从而使后面的合法代码也被视为非法并标红。这种情况下需要逐行排查代码逻辑。 解决方法： 确保整个脚本没有其他潜在的语法问题。...
------------------------ test.html ------------------------ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>板材库存管理系统</title> <link rel="stylesheet" href="../js/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../js/bootstrap-icons-1.8.1/bootstrap-icons.css"> <link rel="stylesheet" href="../css/test.css"> </head> <body> <div class="container py-4"> <!-- 标题部分 --> <div class="text-center mb-4"> <h1 class="text-primary"><i class="bi bi-boxes"></i> 板材库存管理系统</h1> <p class="text-muted">查询订单、产品、板材及库存信息</p> </div> <!-- 统计卡片 --> <div class="row mb-4" id="statsCards"> <!-- 卡片内容由JS动态生成 --> </div> <!-- 搜索区域 --> <div class="card search-section mb-4"> <div class="card-header"> <h5 class="mb-0"><i class="bi bi-search me-2"></i>高级搜索</h5> </div> <div class="card-body"> <div class="row g-3"> <!-- 订单搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-clipboard-search search-icon"></i> <input type="text" class="form-control with-icon" id="orderSearch" placeholder="搜索订单号..." aria-label="订单号搜索"> </div> </div> <!-- 产品搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-grid search-icon"></i> <input type="text" class="form-control with-icon" id="productSearch" placeholder="搜索产品编号..." aria-label="产品编号搜索"> </div> </div> <!-- 板材搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-box search-icon"></i> <input type="text" class="form-control with-icon" id="materialSearch" placeholder="搜索板材ID或材质..." aria-label="板材搜索"> </div> </div> <!-- 木皮搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-tree search-icon"></i> <input type="text" class="form-control with-icon" id="woodSearch" placeholder="搜索木皮名称..." aria-label="木皮搜索"> </div> </div> <!-- 厚度搜索 --> <div class="col-md-4"> <div class="search-control"> <i class="bi bi-arrows-vertical search-icon"></i> <input type="number" class="form-control with-icon" id="thicknessSearch" placeholder="厚度(mm)" min="0" step="0.1"> </div> </div> <!-- 库存范围搜索 --> <div class="col-md-4"> <div class="input-group"> <span class="input-group-text"><i class="bi bi-box"></i></span> <input type="number" class="form-control" id="minStock" placeholder="最小库存" min="0"> <input type="number" class="form-control" id="maxStock" placeholder="最大库存" min="0"> <button class="btn btn-primary" type="button" id="stockStatusBtn"> <i class="bi bi-search"></i> </button> </div> </div> <!-- 高级搜索按钮 --> <div class="col-12 text-end"> <button class="btn btn-sm btn-outline-secondary" id="resetFilters"> <i class="bi bi-x-circle"></i> 重置筛选 </button> </div> </div> </div> </div> <!-- 结果区域 --> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <h5 class="mb-0"><i class="bi bi-table me-2"></i>查询结果</h5> <div class="text-secondary"> <span id="resultCount">0</span> 条记录 <span class="ms-2"><i class="bi bi-info-circle"></i> <small>数据更新时间: <span id="lastUpdate">--:--:--</span></small></span> </div> </div> <div class="card-body result-section"> <div class="table-responsive"> <table class="table table-hover" id="resultsTable"> <thead class="table-light sticky-top"> <tr> <th data-sort="dingdan.number">订单号 <span class="sort-indicator"></span></th> <th data-sort="chanpin.bianhao">产品信息 <span class="sort-indicator"></span></th> <th data-sort="dingdan_chanpin.shuliang">产品数量 <span class="sort-indicator"></span></th> <th data-sort="zujian.name">组件 <span class="sort-indicator"></span></th> <th data-sort="bancai.id">板材 <span class="sort-indicator"></span></th> <th data-sort="chanpin_zujian.one_howmany">单件用量 <span class="sort-indicator"></span></th> <th data-sort="orderUsage">订单用量 <span class="sort-indicator"></span></th> <th data-sort="kucun.shuliang">库存数量 <span class="sort-indicator"></span></th> <th>操作</th> </tr> </thead> <tbody id="resultBody"> <tr id="loadingRow"> <td colspan="9" class="text-center py-5"> <div class="d-flex align-items-center justify-content-center"> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">加载中...</span> </div> <div class="ms-3">正在加载数据，请稍候...</div> </div> </td> </tr> </tbody> </table> </div> <div id="noResults" class="no-results text-center py-5" style="display: none;"> <div> <i class="bi bi-inboxes text-muted" style="font-size: 3rem;"></i> <h4 class="mt-3 text-muted">没有找到匹配的记录</h4> <p class="text-muted">请尝试调整您的搜索条件</p> </div> </div> <!-- 分页控件 --> <nav aria-label="Results pagination" class="mt-3"> <ul class="pagination justify-content-center" id="pagination"> <!-- 分页由JS动态生成 --> </ul> </nav> </div> </div> </div> <!-- 模态框 - 板材详情 --> <div class="modal fade" id="materialDetailModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">板材详情</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" id="materialDetailContent"> <!-- 详情内容由JS动态生成 --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="../js/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script> <script src="../js/dingdan.js"></script> </body> </html> ------------------------ DataManager.js ------------------------ //这个函数不许改，也禁止废话,属性名和其他命名都哼规范不会出现意外， function resolveDataReferences(data) { console.log(data) // 获取 data 对象的所有顶层键 const keys = Object.keys(data); // 遍历每个顶层键（如 users, posts 等） for (const key of keys) { const entities = data[key]; // 遍历该顶层键下的每个实体（如每个 user 或 post） for (const entity of entities) { // 遍历实体的每个属性 for (const attribute in entity) { if (entity?.hasOwnProperty(attribute)) { var trpe=attribute?.replace(/\d/g, ''); // 确保属性属于当前实体 if (Array.isArray(entity[attribute])) { if(data[trpe]==null){ trpe+="s" } // 如果属性是一个数组，则将数组中的每个 ID 替换为对应的实际对象 entity[attribute] = entity[attribute].map(item => data[trpe ]?.find(updateItem => updateItem.id === item.id) || item ); } else if (typeof entity[attribute] === "object" && entity[attribute] !== null) { // 如果属性是一个对象，则将其替换为对应的实际对象 entity[attribute] = data[trpe + "s"]?.find(updateItem => updateItem.id === entity[attribute].id); } } } } } return data; } /** * 数据管理器类，负责与后端API通信并管理数据 */ class DataManager { constructor(baseUrl) { this.baseUrl = baseUrl; this.data = { bancais: [], dingdans: [], mupis: [], chanpins: [], kucuns: [], dingdan_bancais:[], chanpin_zujians: [], zujians: [], caizhis: [], dingdan_chanpins: [], users: [], jinhuos: [] }; this.isSyncing = false; this.lastSync = null; this.callbacks = { all: [], bancais: [], dingdan: [], mupi: [], chanpin: [], kucun: [], chanpin_zujian: [], dingdan_bancai:[], zujian: [], caizhi: [], dingdan_chanpin: [], user: [], jinhuo: [] }; this.syncQueue = Promise.resolve(); this.registerCallback('dingdan_bancai', async (operation, data) => { if (operation === 'add' || operation === 'update') { try { // 构造进货记录数据 const jinhuoData = { dingdan_bancai:data, shuliang: data.shuliang, date: new Date().toISOString(), user: { id: localStorage.getItem("userId") } }; // 创建进货记录 await this.addEntity('jinhuo', jinhuoData); } catch (error) { console.error('进货记录创建失败:', error); } } }); } /** * 获取所有数据 * @returns {Promise<boolean>} 是否成功 */ async fetchAll() { console.log(this) try { const response = await fetch(`${this.baseUrl}/app/all`); if (!response.ok) throw new Error('Network response was not ok'); const result = await response.json(); if (result.status !== 200) throw new Error(result.text || 'API error'); console.log(result.data) const resolvedData = resolveDataReferences(result.data); // 更新本地数据 Object.keys(this.data).forEach(key => { if (resolvedData[key]) { this.data[key] = resolvedData[key]; } }); this.lastSync = new Date(); // 关键改进：数据更新后触发刷新回调 this.triggerCallbacks('refresh', 'all', this.data); return true; } catch (error) { console.error('Fetch error:', error); // 触发错误回调 this.triggerCallbacks('fetch_error', 'all', { error }); return false; } } /** * 注册回调函数 * @param {string} entity - 实体类型（如'bancai'）或'all'表示全局回调 * @param {Function} callback - 回调函数，参数为(operation, data) */ registerCallback(entity, callback) { if (!this.callbacks[entity]) { this.callbacks[entity] = []; } this.callbacks[entity].push(callback); } /** * 移除回调函数 * @param {string} entity - 实体类型单数性质 * @param {Function} callback - 要移除的回调函数 */ unregisterCallback(entity, callback) { if (!this.callbacks[entity]) return; const index = this.callbacks[entity].indexOf(callback); if (index !== -1) { this.callbacks[entity].splice(index, 1); } } /** * 触发回调 * @param {string} operation - 操作类型（'add', 'update', 'delete'） * @param {string} entity - 实体类型单数性质 * @param {Object} data - 相关数据 */ triggerCallbacks(operation, entity, data) { // 触发全局回调 this.callbacks.all.forEach(cb => cb(operation, entity, data)); // 触发特定实体回调 if (this.callbacks[entity]) { this.callbacks[entity].forEach(cb => cb(operation, data)); } } // /** // * 执行CRUD操作并触发回调 // */ // async crudOperation(operation, entity, data) { // try { // const response = await fetch(`${this.baseUrl}/app/${operation}/${entity}`, { // method: 'POST', // headers: {'Content-Type': 'application/json'}, // body: JSON.stringify(data) // }); // // if (!response.ok) throw new Error('Network response was not ok'); // // const result = await response.json(); // if (result.status !== 200) throw new Error(result.text || 'API error'); // // // // // 自动同步数据 // this.syncData(); // // 触发操作成功的回调 // this.triggerCallbacks(operation, entity, data); // return result; // } catch (error) { // console.error('CRUD error:', error); // // 触发操作失败的回调 // this.triggerCallbacks(`${operation}_error`, entity, { // data, // error: error.message // }); // throw error; // } // } /** * 执行CRUD操作 * @param {string} operation - 'add', 'delete', 'update' * @param {string} entity - 实体名称单数性质（小写） * @param {Object} data - 要发送的数据 后端要求数据格式为{属性: "值", 关联对象: {id:0}, 关联对象集: [{id:0}]} * @returns {Promise<Object>} 响应结果 */ async crudOperation(operation, entity, data) { try { const response = await fetch(`${this.baseUrl}/app/${operation}/${entity}`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) }); if (!response.ok) throw new Error('Network response was not ok'); const result = await response.json(); if (result.status !== 200) throw new Error(result.text || 'API error'); console.log(data)//这了就没有id了 // 自动同步数据 this.syncQueue = this.syncQueue.then(async () => { await this.syncData(); // 同步完成后触发操作回调 this.triggerCallbacks(operation, entity, result.data); }); return result; } catch (error) { console.error('CRUD error:', error); // 触发操作失败的回调 this.triggerCallbacks(`${operation}_error`, entity, { data, error: error.message }); throw error; } } /** * 自动同步数据（防止频繁请求） */ async syncData() { if (this.isSyncing) { this.pendingSync = true; return; } this.isSyncing = true; try { await this.fetchAll(); } catch (error) { console.error('Sync failed:', error); } finally { this.isSyncing = false; // 处理等待中的同步请求 if (this.pendingSync) { this.pendingSync = false; setTimeout(() => this.syncData(), 1000); } } } /** * 添加实体 * @param {string} entity - 实体名称单数性质 * @param {Object} data - 实体数据 */ async addEntity(entity, data) { return this.crudOperation('add', entity, data); } /** * 更新实体 * @param {string} entity - 实体名称单数性质 * @param {Object} data - 实体数据（必须包含id） */ async updateEntity(entity, data) { return this.crudOperation('update', entity, data); } /** * 删除实体 * @param {string} entity - 实体名称单数性质 * @param {number} id - 实体ID */ async deleteEntity(entity, id) { return this.crudOperation('delete', entity, {id}); } /** * 新增方法：手动触发数据刷新 */ async refreshData() { return this.syncQueue = this.syncQueue.then(() => this.syncData()); } /** * 获取订单的可用板材信息 * @param {number} dingdanId - 订单ID * @returns {Object} 可用板材信息 */ getAvailableBancaisForOrder(dingdanId) { const dingdan = this.data.dingdans.find(d => d.id == dingdanId); if (!dingdan) return {}; return dingdan.availableBancais || {}; } /** * 获取产品的组件列表 * @param {number} chanpinId - 产品ID * @returns {Array} 组件列表 */ getZujiansForChanpin(chanpinId) { const chanpin = this.data.chanpins.find(c => c.id == chanpinId); if (!chanpin) return []; return (chanpin.chanpin_zujian_list || []) .map(cz => cz.zujian) .filter(z => z); } /** * 获取组件的板材信息 * @param {number} zujianId - 组件ID * @returns {Array} 板材列表 */ getBancaisForZujian(zujianId) { return (this.data.chanpin_zujians || []) .filter(cz => cz.zujian && cz.zujian.id == zujianId) .map(cz => cz.bancai) .filter(b => b); } /** * 创建进货记录 * @param {Object} jinhuoData - 进货数据 * @returns {Promise} 操作结果 */ async createJinhuo(jinhuoData) { return this.addEntity('jinhuo', jinhuoData); } /** * 获取订单列表 * @returns {Array} 订单列表 */ getDingdans() { return this.data.dingdans || []; } /** * 获取订单的产品列表 * @param {number} dingdanId - 订单ID * @returns {Array} 产品列表 */ getChanpinsForDingdan(dingdanId) { const dingdan = this.data.dingdans.find(d => d.id == dingdanId); if (!dingdan) return []; return (dingdan.dingdan_chanpin_list || []) .map(dc => dc.chanpin) .filter(c => c); } } export { DataManager }; // 创建单例实例 //const dataManager = new DataManager('http://127.0.0.1:8080/KuCun2'); //// 初始化时获取所有数据 //dataManager.fetchAll().then(() => { // console.log('Initial data loaded'); //}); // 导出数据对象，外部可以直接访问 data.bancais, data.dingdans 等 //export const data = dataManager.data; //// 导出操作方法 //export const addEntity = dataManager.addEntity.bind(dataManager); //export const updateEntity = dataManager.updateEntity.bind(dataManager); //export const deleteEntity = dataManager.deleteEntity.bind(dataManager); //export const fetchAll = dataManager.fetchAll.bind(dataManager); ------------------------ test.js ------------------------ // 创建DataManager实例 // 获取全局的DataManager实例 const dataManager = window.parent.dataManager; // 扁平化数据结构 function flattenData(data) { const result = []; // 遍历所有订单 data.dingdans.forEach(dingdan => { // 遍历订单中的产品 dingdan.dingdan_chanpin?.forEach(dc => { const chanpin = dc.chanpin; // 遍历产品中的组件 chanpin.chanpin_zujian.forEach(cz => { const zujian = cz.zujian; const bancai = cz.bancai; const kucun = bancai.kucun; // 计算订单用量 = 产品数量 × 组件数量 × 单件用量 const orderUsage = dc.shuliang * cz.zujianshu * cz.one_howmany; // 创建扁平化数据对象 result.push({ dingdan: dingdan, dingdan_chanpin: dc, chanpin: chanpin, chanpin_zujian: cz, zujian: zujian, bancai: bancai, kucun: kucun, orderUsage: orderUsage }); }); }); }); return result; } // 更新统计卡片 function updateStatistics(data) { // 订单总数 $('#orderCount').text(data.dingdans.length); // 产品种类 $('#productCount').text(data.chanpins.length); // 板材种类 $('#materialCount').text(data.bancais.length); // 库存总量 const totalStock = data.kucuns.reduce((sum, kucun) => sum + kucun.shuliang, 0); $('#totalStock').text(totalStock); } // 渲染表格 function renderTable(dataArray) { const $tbody = $('#resultBody'); $tbody.empty(); if (dataArray.length === 0) { $('#noResults').show(); $('#resultCount').text('0'); return; } $('#noResults').hide(); $('#resultCount').text(dataArray.length); dataArray.forEach(item => { const bancai = item.bancai; const dingdan = item.dingdan; const chanpin = item.chanpin; const zujian = item.zujian; const kucun = item.kucun; const row = ` <tr> <td>${dingdan.number}</td> <td>${chanpin.bianhao}</td> <td>${item.dingdan_chanpin.shuliang}</td> <td>${zujian.name}</td> <td> <div>ID: ${bancai.id}</div> <div>材质: ${bancai.caizhi.name}</div> <div>厚度: ${bancai.houdu}mm</div> <div>木皮1: ${bancai.mupi1.name}${bancai.mupi1.you ? '(油漆)' : ''}</div> <div>木皮2: ${bancai.mupi2.name}${bancai.mupi2.you ? '(油漆)' : ''}</div> </td> <td>${item.chanpin_zujian.one_howmany}</td> <td>${item.orderUsage.toFixed(2)}</td> <td class="${kucun.shuliang < item.orderUsage ? 'text-danger fw-bold' : ''}"> ${kucun.shuliang} </td> <td> <button class="btn btn-sm btn-outline-primary view-detail" data-bancai-id="${bancai.id}"> <i class="bi bi-info-circle"></i> 详情 </button> </td> </tr> `; $tbody.append(row); }); // 绑定详情按钮事件 $('.view-detail').off('click').on('click', function() { const bancaiId = $(this).data('bancai-id'); viewBancaiDetail(bancaiId); }); } // 查看板材详情 function viewBancaiDetail(bancaiId) { const bancai = dataManager.data.bancais.find(b => b.id === bancaiId); if (!bancai) return; const kucun = bancai.kucun; const reservedOrder = kucun.reservedOrder ? kucun.reservedOrder.number : '无'; // 构建详情内容 const detailContent = ` <div class="bancai-detail"> <h5 class="mb-3">板材详情 #${bancai.id}</h5> <div class="row"> <div class="col-md-6"> <div class="mb-2"><strong>材质:</strong> ${bancai.caizhi.name}</div> <div class="mb-2"><strong>厚度:</strong> ${bancai.houdu}mm</div> <div class="mb-2"><strong>木皮1:</strong> ${bancai.mupi1.name}${bancai.mupi1.you ? ' (油漆)' : ''}</div> <div class="mb-2"><strong>木皮2:</strong> ${bancai.mupi2.name}${bancai.mupi2.you ? ' (油漆)' : ''}</div> </div> <div class="col-md-6"> <div class="mb-2"><strong>当前库存:</strong> ${kucun.shuliang}</div> <div class="mb-2"><strong>预定订单:</strong> ${reservedOrder}</div> <div class="mb-2"><strong>库存状态:</strong> <span class="badge ${kucun.shuliang > 50 ? 'bg-success' : kucun.shuliang > 10 ? 'bg-warning' : 'bg-danger'}"> ${kucun.shuliang > 50 ? '充足' : kucun.shuliang > 10 ? '正常' : '不足'} </span> </div> </div> </div> <h6 class="mt-4 border-top pt-3">使用此板材的产品组件</h6> <ul class="list-group"> ${dataManager.data.chanpin_zujians .filter(cz => cz.bancai.id === bancaiId) .map(cz => `<li class="list-group-item">${cz.zujian.name} (产品: ${cz.chanpin.bianhao})</li>`) .join('')} </ul> </div> `; // 使用模态框显示详情 const modal = new bootstrap.Modal(document.getElementById('detailModal')); $('#detailModal .modal-body').html(detailContent); modal.show(); } // 搜索和过滤数据 function filterData(flatData) { const orderSearch = $('#orderSearch').val().toLowerCase(); const productSearch = $('#productSearch').val().toLowerCase(); const materialSearch = $('#materialSearch').val().toLowerCase(); const woodSearch = $('#woodSearch').val().toLowerCase(); const thickness = parseFloat($('#thicknessSearch').val()); const minStock = parseInt($('#minStock').val()) || 0; const maxStock = parseInt($('#maxStock').val()) || Infinity; return flatData.filter(item => { const bancai = item.bancai; const dingdan = item.dingdan; const chanpin = item.chanpin; const kucun = item.kucun; // 订单号搜索 if (orderSearch && !dingdan.number.toLowerCase().includes(orderSearch)) { return false; } // 产品编号搜索 if (productSearch && !chanpin.bianhao.toLowerCase().includes(productSearch)) { return false; } // 板材ID或材质搜索 if (materialSearch && !(bancai.id.toString().includes(materialSearch) || bancai.caizhi.name.toLowerCase().includes(materialSearch))) { return false; } // 木皮搜索 if (woodSearch && !(bancai.mupi1.name.toLowerCase().includes(woodSearch) || bancai.mupi2.name.toLowerCase().includes(woodSearch))) { return false; } // 厚度过滤 if (!isNaN(thickness) && Math.abs(bancai.houdu - thickness) > 0.1) { return false; } // 库存范围过滤 if (kucun.shuliang < minStock || kucun.shuliang > maxStock) { return false; } return true; }); } // 初始化排序功能 function initSorting() { let currentSort = { column: null, direction: 'asc' }; $('th[data-sortable]').on('click', function() { const column = $(this).index(); const $sortIndicator = $(this).find('.sort-indicator'); // 重置其他列的排序指示器 $('.sort-indicator').html(''); // 更新当前排序状态 if (currentSort.column === column) { currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc'; } else { currentSort.column = column; currentSort.direction = 'asc'; } // 更新排序指示器 $sortIndicator.html(currentSort.direction === 'asc' ? '↑' : '↓'); // 执行排序 sortTable(currentSort); }); } // 排序表格数据 function sortTable(sortConfig) { const flatData = window.currentFlatData || []; if (flatData.length === 0) return; flatData.sort((a, b) => { let valueA, valueB; switch (sortConfig.column) { case 0: // 订单号 valueA = a.dingdan.number; valueB = b.dingdan.number; break; case 1: // 产品信息 valueA = a.chanpin.bianhao; valueB = b.chanpin.bianhao; break; case 2: // 产品数量 valueA = a.dingdan_chanpin.shuliang; valueB = b.dingdan_chanpin.shuliang; break; case 3: // 组件 valueA = a.zujian.name; valueB = b.zujian.name; break; case 4: // 板材 valueA = a.bancai.id; valueB = b.bancai.id; break; case 5: // 单件用量 valueA = a.chanpin_zujian.one_howmany; valueB = b.chanpin_zujian.one_howmany; break; case 6: // 订单用量 valueA = a.orderUsage; valueB = b.orderUsage; break; case 7: // 库存数量 valueA = a.kucun.shuliang; valueB = b.kucun.shuliang; break; default: return 0; } // 数字排序 if (typeof valueA === 'number') { return sortConfig.direction === 'asc' ? valueA - valueB : valueB - valueA; } // 字符串排序 if (typeof valueA === 'string') { return sortConfig.direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA); } return 0; }); // 重新渲染排序后的表格 renderTable(flatData); } // 初始化页面 $(document).ready(async function() { // 创建详情模态框（如果不存在） if (!$('#detailModal').length) { $('body').append(` <div class="modal fade" id="detailModal" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">板材详情</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> </div> </div> </div> </div> `); } // 显示加载状态 $('#loadingRow').show(); $('#noResults').hide(); try { // 加载数据 await dataManager.fetchAll(); // 更新最后更新时间 $('#lastUpdate').text(new Date().toLocaleTimeString()); // 扁平化数据 const flatData = flattenData(dataManager.data); window.currentFlatData = flatData; // 保存当前数据用于排序 // 更新统计卡片 updateStatistics(dataManager.data); // 渲染表格 renderTable(flatData); // 初始化排序 initSorting(); } catch (error) { console.error('初始化失败:', error); $('#resultBody').html(` <tr> <td colspan="9" class="text-center text-danger py-5"> <i class="bi bi-exclamation-circle fs-1"></i> <h4 class="mt-3">数据加载失败</h4> <p>${error.message || '请检查网络连接后重试'}</p> <button class="btn btn-primary mt-2" id="retryBtn">重试</button> </td> </tr> `); $('#retryBtn').on('click', function() { location.reload(); }); } finally { $('#loadingRow').hide(); } // 绑定搜索事件 $('#orderSearch, #productSearch, #materialSearch, #woodSearch, #thicknessSearch, #minStock, #maxStock').on('input', function() { performSearch(); }); $('#stockStatusBtn').on('click', performSearch); }); // 执行搜索 function performSearch() { if (!window.currentFlatData) return; const filteredData = filterData(window.currentFlatData); renderTable(filteredData); } 修改test.js实现页面功能 基本逻辑 一个订单有很多产品不同数量，每个产品可以再很多订单中，一个产品有很多组件，一个组件可以在很多产品中，因为每个组件因为在不同的产品中有不同的生产工艺，所以使用不同的板材和板材能生产组件数量，每个板材有不同的材质和两面木皮，木皮表面可能有油漆， 订购时可能直接购入板材，也可能按订单和产品订购板材，也用可能按订单产品组件订购板材，每次采购不标准，一个订单可能订购几次，用户有姓名 账号 密码 权限， 一个记录进货和消耗，查看的时候会查看订单下有多少板材可用
06-25
-新增一列：<thdata-sort="totalOrderUsage">订单总用量<spanclass="sort-indicator"></span></th>-在表格行中增加：<td>${item.totalOrderUsage.toFixed(2)}</td>-然后修改库存数量的显示：用库存和订单总用量比较...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>工资条生成工具</title> <!-- 引入SheetJS库用于处理Excel文件 --> <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script> <!-- 关键修复：使用支持样式的xlsx-style库替换基础版xlsx库 --> <script src="https://unpkg.com/xlsx-style@0.15.6/dist/xlsx.full.min.js"></script> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif; width: 100%; min-height: 100vh; padding: 20px; font-size: 14px; color: #333; line-height: 1.5; } h1 { text-align: center; margin-bottom: 25px; font-size: 24px; color: #2c3e50; } h2 { font-size: 18px; margin: 15px 0; color: #3498db; } .file-upload { border: 2px dashed #95a5a6; padding: 30px 20px; text-align: center; margin-bottom: 30px; cursor: pointer; border-radius: 6px; transition: all 0.3s ease; background-color: #f8f9fa; } .file-upload:hover, .file-upload.active { border-color: #3498db; background-color: #f1f7fc; } .file-upload p { font-size: 16px; color: #7f8c8d; } #fileInput { display: none; } .controls { display: flex; justify-content: center; margin: 20px 0; } .btn { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s ease; display: flex; align-items: center; gap: 8px; } .btn:hover { background-color: #2980b9; } .btn:disabled { background-color: #bdc3c7; cursor: not-allowed; } #dataContainer { width: 100%; overflow-x: auto; margin: 0 auto; } table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; } th, td { border: 1px solid #ddd; padding: 12px 10px; text-align: left; word-wrap: break-word; word-break: break-all; height: 45px; } /* 数值列右对齐，方便查看 */ td.numeric { text-align: right; } /* 工资条表头样式 */ .salary-slip-header th { background-color: #ecf0f1; color: #2c3e50; font-weight: bold; position: sticky; top: 0; z-index: 2; } /* 合计行样式 */ .total-row td { background-color: #f8f9fa; font-weight: bold; } /* 签字行样式 */ .signature-row td { background-color: #f9f9f9; } tr:hover { background-color: #f1f7fc; } .message { color: #7f8c8d; text-align: center; padding: 50px 0; font-size: 16px; } .error { color: #e74c3c; } /* 无效数值样式 */ .invalid-value { background-color: #fff3cd; color: #856404; } .date-info { color: #2c3e50; font-size: 15px; margin: 15px 0; padding: 15px 12px; background-color: #f1f9f7; border-left: 3px solid #27ae60; border-radius: 4px; line-height: 1.8; min-height: 45px; } /* 响应式调整 */ @media (max-width: 1200px) { body { padding: 15px; font-size: 13px; } th, td { padding: 10px 8px; height: 40px; } .date-info { padding: 12px 10px; min-height: 40px; } } @media (max-width: 768px) { body { padding: 10px; font-size: 12px; } h1 { font-size: 20px; margin-bottom: 15px; } h2 { font-size: 16px; } .file-upload { padding: 20px 10px; margin-bottom: 20px; } th, td { padding: 8px 6px; height: 36px; } .date-info { padding: 10px 8px; min-height: 36px; } } </style> </head> <body> <h1>工资条生成工具</h1> <!-- 文件上传区域 --> <div class="file-upload" id="dropArea"> <p>点击或拖放工资表Excel文件到这里（支持多次上传更新）</p> <input type="file" id="fileInput" accept=".xlsx, .xls"> </div> <!-- 提取的信息 --> <div id="infoContainer" style="display: none;"> <div class="date-info"> <p><strong>公司名称：</strong><span id="companyName"></span></p> <p><strong>工资月份：</strong><span id="salaryMonth"></span></p> <p><strong>上次更新：</strong><span id="lastUpdated"></span></p> </div> </div> <!-- 控制按钮区域 --> <div class="controls"> <button id="exportBtn" class="btn" disabled> 导出工资条 </button> </div> <!-- 数据展示区域 --> <div id="dataContainer" style="display: none;"> <h2>工资条数据</h2> <table id="dataTable"> <tbody id="dataTableBody"> <!-- 提取的数据将在这里显示，每条数据带独立表头 --> </tbody> </table> </div> <!-- 消息区域 --> <div id="message" class="message">请上传符合格式要求的工资表Excel文件(.xlsx, .xls)</div> <script> // 获取DOM元素 const dropArea = document.getElementById('dropArea'); const fileInput = document.getElementById('fileInput'); const dataContainer = document.getElementById('dataContainer'); const dataTable = document.getElementById('dataTable'); const dataTableBody = document.getElementById('dataTableBody'); const message = document.getElementById('message'); const infoContainer = document.getElementById('infoContainer'); const companyName = document.getElementById('companyName'); const salaryMonth = document.getElementById('salaryMonth'); const lastUpdated = document.getElementById('lastUpdated'); const exportBtn = document.getElementById('exportBtn'); // 存储处理后的数据用于导出 let processedDataForExport = null; let currentDate = ''; // 定义预期的表头结构 const expectedHeaders = [ '序号', '部门', '姓名', '出勤', '基本工资', '岗位工资', '绩效', '浮动津贴', '扣除', '应发工资', '基本养老（个人）', '失业（个人）', '基本医疗（个人）', '大病（个人）', '公积金（个人）', '个税', '实发工资', '签字' ]; // 定义哪些列是数值类型（索引） const numericColumns = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; // 点击上传区域触发文件选择 dropArea.addEventListener('click', () => fileInput.click()); // 文件选择变化时处理 fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) { handleFile(e.target.files[0]); // 重置input值，允许重复选择同一文件 fileInput.value = ''; } }); // 拖放功能增强 dropArea.addEventListener('dragover', (e) => { e.preventDefault(); dropArea.classList.add('active'); }); dropArea.addEventListener('dragleave', () => { dropArea.classList.remove('active'); }); dropArea.addEventListener('drop', (e) => { e.preventDefault(); dropArea.classList.remove('active'); if (e.dataTransfer.files.length > 0) { handleFile(e.dataTransfer.files[0]); } }); // 导出按钮点击事件 exportBtn.addEventListener('click', exportToExcel); // 处理Excel文件 - 支持多次上传更新 function handleFile(file) { // 检查文件类型 if (!file.name.match(/\.(xlsx|xls)$/)) { showMessage('请上传Excel文件(.xlsx, .xls)', true); return; } showMessage(`正在解析文件: ${file.name}...`); const reader = new FileReader(); reader.onload = function(e) { try { // 读取并解析Excel文件 const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个工作表 const firstSheetName = workbook.SheetNames[1]; const worksheet = workbook.Sheets[firstSheetName]; // 转换为JSON const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); if (jsonData.length < 2) { showMessage('文件内容不符合要求，至少需要包含标题行和表头行', true); return; } // 处理数据并更新表格 processData(jsonData); // 更新最后上传时间 updateLastModifiedTime(); } catch (error) { showMessage('解析文件失败: ' + error.message, true); console.error(error); } }; reader.readAsArrayBuffer(file); } // 更新最后修改时间 function updateLastModifiedTime() { const now = new Date(); const formattedTime = now.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); lastUpdated.textContent = formattedTime; infoContainer.style.display = 'block'; } // 处理数据，提取公司名称和日期并规范化表头 function processData(rawData) { // 提取标题行信息（第一行数据） let title = rawData[0][0] || ''; // 提取公司名称 const companyMatch = title.match(/^(.*?)\s*\d{4}/); const company = companyMatch ? companyMatch[1] : '未知公司'; // 提取日期 const datePattern = /(\d{4})\D*(\d{1,2})\D*月/; const dateMatch = title.match(datePattern); currentDate = dateMatch ? dateMatch[0] : ''; // 更新公司名称和工资月份信息 companyName.textContent = company; salaryMonth.textContent = currentDate; // 提取特定行列数据 const extractedData = extractSpecificData(rawData); // 处理数值数据 const processedData = processNumericData(extractedData); // 保存处理后的数据用于导出 processedDataForExport = processedData; // 启用导出按钮 exportBtn.disabled = false; // 显示处理后的数据（每条数据带独立表头） displayData(processedData, currentDate); } // 提取特定行列数据 function extractSpecificData(rawData) { // 转换Excel列字母为索引（A=0, B=1, C=2...） const columnMap = { 'A': 0, 'B': 1, 'C': 2, 'O': 14, 'Q': 16, 'R': 17, 'S': 18, 'T': 19, 'W': 22, 'X': 23, 'Y': 24, 'Z': 25, 'AA': 26, 'AB': 27, 'AC': 28, 'AE': 30, 'AG': 32, 'AH': 33 }; // 需要提取的列索引 const columnsToExtract = Object.values(columnMap); // 找到最后一行有数据的行索引 let lastDataRow = -1; for (let i = rawData.length - 1; i >= 0; i--) { const row = rawData[i]; if (row && row.some(cell => cell !== undefined && cell !== null && cell !== '')) { lastDataRow = i; break; } } // 计算行范围 const startRow = 5; // 第6行（0-based索引） const endRow = lastDataRow !== -1 ? lastDataRow - 6 : -1; // 验证行范围有效性 if (lastDataRow === -1) { console.warn('未找到有数据的行'); return []; } if (startRow >= endRow || endRow < 0) { console.warn(`数据行范围无效，开始行(${startRow+1}) >= 结束行(${endRow+1})`); showMessage(`数据行范围无效，开始行(${startRow+1}) >= 结束行(${endRow+1})`, true); return []; } // 提取数据到二维数组 const result = []; for (let i = startRow; i < endRow; i++) { const rowData = rawData[i] || []; const extractedRow = []; columnsToExtract.forEach(colIndex => { extractedRow.push(rowData[colIndex] !== undefined ? rowData[colIndex] : ''); }); result.push(extractedRow); } return result; } // 处理数值数据：校验并保留2位小数（四舍五入），空值不标红 function processNumericData(data) { return data.map(row => { return row.map((cell, index) => { // 检查当前列是否为数值列 if (numericColumns.includes(index)) { // 处理空值情况 if (cell === '' || cell === null || cell === undefined) { return { value: '', valid: true, // 空值视为有效 rawValue: 0 // 用于计算合计的原始数值 }; } // 尝试转换为数值 const num = parseFloat(cell); // 校验数值有效性 if (isNaN(num)) { return { value: cell, valid: false, rawValue: 0 }; } else { const roundedValue = Math.round(num * 100) / 100; return { value: roundedValue, valid: true, rawValue: roundedValue // 存储用于计算合计的数值 }; } } // 非数值列，直接返回原始值 return { value: cell, valid: true, rawValue: 0 }; }); }); } // 计算各列的总和 function calculateTotals(processedData) { const totals = new Array(expectedHeaders.length).fill(0); processedData.forEach(row => { row.forEach((cell, index) => { // 只对数值列进行求和 if (numericColumns.includes(index)) { totals[index] += cell.rawValue; } }); }); // 保留两位小数 return totals.map(total => Math.round(total * 100) / 100); } // 显示解析后的数据 - 每条数据前都添加表头，无间隔，最后添加合计行和签字行 function displayData(processedData, date) { // 清空表格 dataTableBody.innerHTML = ''; // 如果没有提取到数据，显示提示 if (processedData.length === 0) { const emptyRow = document.createElement('tr'); const emptyCell = document.createElement('td'); emptyCell.colSpan = expectedHeaders.length; emptyCell.textContent = '没有提取到符合条件的数据'; emptyRow.appendChild(emptyCell); dataTableBody.appendChild(emptyRow); } else { // 为每条数据添加表头（无间隔） processedData.forEach((row) => { // 添加表头行（每条数据前都添加） const headerRow = document.createElement('tr'); headerRow.className = 'salary-slip-header'; expectedHeaders.forEach((header) => { if (header === '应发工资' || header === '实发工资') { header += `（${date}）`; } const th = document.createElement('th'); th.textContent = header; headerRow.appendChild(th); }); dataTableBody.appendChild(headerRow); // 添加数据行 const dataRow = document.createElement('tr'); row.forEach((cell, cellIndex) => { const td = document.createElement('td'); td.textContent = cell.value; // 数值列右对齐 if (numericColumns.includes(cellIndex)) { td.classList.add('numeric'); } // 标记无效数值 if (!cell.valid) { td.classList.add('invalid-value'); } dataRow.appendChild(td); }); dataTableBody.appendChild(dataRow); }); // 计算各列总和 const totals = calculateTotals(processedData); // 添加合计行（倒数第二行） const totalRow = document.createElement('tr'); totalRow.className = 'total-row'; // 前3个单元格合并，内容为"合计" const mergedCell = document.createElement('td'); mergedCell.colSpan = 3; mergedCell.textContent = '合计'; mergedCell.style.textAlign = 'center'; totalRow.appendChild(mergedCell); // 第4个单元格为空 const emptyCell = document.createElement('td'); totalRow.appendChild(emptyCell); // 5-17单元格为各列总和（索引4到16） for (let i = 4; i < expectedHeaders.length; i++) { const td = document.createElement('td'); td.textContent = totals[i]; if (i == expectedHeaders.length - 1) { td.textContent = ''; } if (numericColumns.includes(i)) { td.classList.add('numeric'); } totalRow.appendChild(td); } dataTableBody.appendChild(totalRow); // 添加签字行（最后一行） const signatureRow = document.createElement('tr'); signatureRow.className = 'signature-row'; // 制表 const makerCell = document.createElement('td'); makerCell.colSpan = 4; makerCell.textContent = '制表：'; signatureRow.appendChild(makerCell); // 财务 const financeCell = document.createElement('td'); financeCell.colSpan = 4; financeCell.textContent = '财务：'; signatureRow.appendChild(financeCell); // 审核 const auditCell = document.createElement('td'); auditCell.colSpan = 5; auditCell.textContent = '审核：'; signatureRow.appendChild(auditCell); // 审批 const approveCell = document.createElement('td'); approveCell.colSpan = 5; approveCell.textContent = '审批：'; signatureRow.appendChild(approveCell); dataTableBody.appendChild(signatureRow); } // 显示数据区域，隐藏消息 dataContainer.style.display = 'block'; message.style.display = 'none'; } // 导出数据到Excel function exportToExcel() { if (!processedDataForExport || processedDataForExport.length === 0) { showMessage('没有可导出的数据', true); return; } // 准备导出数据 const exportData = []; // 添加每条记录的表头和数据 processedDataForExport.forEach(row => { // 添加表头行 const headerRow = expectedHeaders.map(header => { if (header === '应发工资' || header === '实发工资') { return `${header}（${currentDate}）`; } return header; }); exportData.push(headerRow); // 添加数据行 const dataRow = row.map(cell => cell.value); exportData.push(dataRow); }); // 计算合计 const totals = calculateTotals(processedDataForExport); // 准备合计行 const totalRow = []; // 前3个单元格合并为"合计" totalRow.push("合计"); totalRow.push(null); // 第二个单元格（合并后不需要） totalRow.push(null); // 第三个单元格（合并后不需要） totalRow.push(""); // 第四个单元格为空 // 添加5-17列的合计值 for (let i = 4; i < expectedHeaders.length - 1; i++) { totalRow.push(totals[i]); } exportData.push(totalRow); // 准备签字行 - 只在第一个单元格设置值，其他为空 const signatureRow = new Array(expectedHeaders.length).fill(null); signatureRow[0] = "制表： 财务： 审核： 审批："; exportData.push(signatureRow); // 创建工作簿和工作表 const ws = XLSX.utils.aoa_to_sheet(exportData); // 设置单元格合并 if (exportData.length > 0) { const totalRowIndex = exportData.length - 2; // 合计行索引 const signatureRowIndex = exportData.length - 1; // 签字行索引 ws['!merges'] = [ // 合计行前3列合并 { s: { r: totalRowIndex, c: 0 }, e: { r: totalRowIndex, c: 2 } }, // 签字行A-R列合并为一个单元格 { s: { r: signatureRowIndex, c: 0 }, e: { r: signatureRowIndex, c: 17 } // 合并到第18列(R列) } ]; } // 设置固定行高 const range = XLSX.utils.decode_range(ws['!ref']); ws['!rows'] = []; // 初始化行配置数组 for (let R = 0; R <= range.e.r; R++) { // 为每一行设置固定高度20 ws['!rows'][R] = { hpt: 30 }; // hpt单位是1/20点，所以20像素需要乘以20 } // 使用自定义列宽，从第一列开始依次应用 const customWidths = [3.92, 4.8, 5, 4.05, 7.43, 7.68, 3.55, 4.93, 4.18, 12.05, 6.93, 6.93, 7.3, 6.93, 7.55, 5.68, 12.18, 9.43 ]; // 为每个表头应用对应的自定义宽度 ws['!cols'] = customWidths.map(width => ({ // 保留一位小数并转换为数字，确保宽度值正确 wch: parseFloat(width.toFixed(2)) })); // 定义包含自动换行的单元格样式 const cellStyle = { font: { sz: 10 // 小一号字体 }, alignment: { wrapText: true // 核心配置：启用自动换行 } }; // 应用样式到所有单元格 for (const cellAddress in ws) { // 跳过非单元格属性（如!cols、!rows等） if (cellAddress.startsWith('!')) continue; if (ws[cellAddress]) { // 合并已有样式与自动换行样式 ws[cellAddress].s = { ...ws[cellAddress].s, ...cellStyle }; } else { // 为空白单元格设置样式 ws[cellAddress] = { s: cellStyle }; } } // 创建工作簿并添加工作表 const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "工资条"); // 生成文件名（包含公司名称和日期） const company = companyName.textContent || "未知公司"; const fileName = `${company}_${currentDate || new Date().toLocaleDateString()}_工资条.xlsx`; // 导出文件 XLSX.writeFile(wb, fileName); } // 显示消息 function showMessage(text, isError = false) { message.textContent = text; message.className = isError ? 'message error' : 'message'; message.style.display = 'block'; dataContainer.style.display = 'none'; infoContainer.style.display = 'none'; } </script> </body> </html> 希望导出后有内容部分加边框，字体为宋体10号字，自动换行，对其方式上下左右居中，奇数行加粗
最新发布
08-07
<think>根据需求，我们需要在导出的Excel中实现以下样式： 1. 内容部分加边框 2. 字体为宋体10号字 3. 自动换行 4. 对齐方式：上下左右居中 5. 奇数行（这里指的是每个工资条的表头行）加粗 但是，由于Sheet...
<el-dialog :title="title" v-model="open" width="600px"> <el-form :model="form" :rules="rules" ref="userRef" label-width="80px" label-position="top" require-asterisk-position="right"> <el-row :gutter="16"> <el-col :span="12"> <el-form-item label="Name" prop="nickName"> <el-input v-model="form.nickName" placeholder="Enter" maxlength="30" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Email" prop="email"> <el-input v-model="form.email" placeholder="Enter" maxlength="50" autocomplete="new-username" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item v-if="form.userId !== ''" label="Password"> <el-input v-model="form.password" disabled placeholder="Enter" type="password" maxlength="20" show-password autocomplete="new-password" /> </el-form-item> <el-form-item v-else label="Password" prop="password"> <el-input v-model="form.password" placeholder="Enter" type="password" maxlength="20" show-password autocomplete="new-password" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Role" prop="role"> <el-select v-model="form.role" placeholder="Select"> <el-option label="General Manager" :value="0" /> <el-option label="Account Manager" :value="1" /> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Permissions"> <el-radio-group v-model="form.permissions"> <el-radio :value="0">Read</el-radio> <el-radio :value="1">Write</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Status"> <el-switch v-model="form.status" active-value="0" inactive-value="1" /> </el-form-item> </el-col> </el-row> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" :loading="loadingSave" @click="submitForm(userRef)">save</el-button> <el-button @click="cancel">Cancel</el-button> </div> </template> </el-dialog> Vue3 ElementPlus el-dialog里面的el-form label="Role"每次打开都会被验证标红
08-06
<think>首先，用户的问题是关于Vue3和ElementPlus的特定问题：在el-dialog内部的el-form中，label='Role'在打开时被错误验证标红。用户提供了几个引用，这些是来自站内的代码片段，展示了如何自定义el-form-item的...
angularjs - 富文本编辑器simditor - 上传、显示带格式文本
sinat_33638616的博客
03-23 977
angularjs版本 1.6.9simditor下载地址https://github.com/mycolorway/simditor/releases  点击打开链接加入&lt;link rel="stylesheet" href="../css/simditor.css" /&gt;&lt;link rel="stylesheet" href="../css/font-awesome.css"...
利用 JavaScript 实现富文本编辑器
Provenr的博客
11-27 1286
富文本编辑
富文本中＜script＞标签转义
qq_40285497的博客
06-11 667
使用的是正则的方式，代码如下： let str = '<h1 id="title">XSS Demo</h1><script>alert("xss");</script>' function scriptTransfer(str) { let reg = /(<)([\/]?script)(>)/g // abc分别对应上面正则中第一二三括号内的匹配 return str.replace(reg, function (
说说 JavaScript 表单脚本之富文本编辑功能
读万卷书，行万里路
07-11 2071
富文本编辑，即所见即所得（What You See Is What You Get）。这个技术的本质是在页面中嵌入一个包含空 HTML 页面的 iframe。通过 designMode 属性（设置为 on），这个页面就可以被编辑，编辑对象是这个页面的 <body> 元素的 HTML 代码。iframe 中使用一个简单的 HTML 页面就可以作为内容：<!DOCTYPE html> <html> <
html+js富文本
Juliet_xmj的博客
08-20 1746
html+js富文本 rtf是Rich Text Format的缩写，意即多文本格式。这是一种 类似DOC格式（Word文档） 的文件，有很好的兼容性，使用Windows“附件”中的“写字板”就能打开并进行编辑。 div方式实现简单富文本 依赖方法是doucument.execCommand() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam
数据库中查询的富文本带有标签的文字在前端显示问题
u010357298的博客
12-19 3712
post.content=org.apache.commons.lang.StringEscapeUtils.unescapeHtml(post.content) 未经测试 一般富文本编辑器保存的文章排版都是添加了跟多html或者css代码保存到数据库的，为就是后台预言可以直接从数据库中取出来放到html页面显示那些样式和排版，此时后台读取到带有html标记的数据应该是交给JavaSc...
vue3 script setup 使用tinymce富文本编辑器-f
默的博客
08-17 1267
本文就是对于tinymce在vue3中的组件化封装进行的总结，便于大家直接上手使用。
如何标红文本域的违禁词？
weixin_30888413的博客
12-21 396
一、问题描述 监听文本域的输入信息，向后端发送请求，后端返回违禁词，前端标红违禁词。 二、问题分析 难点是怎么对文本域的某个文字标红？因为textarea标签里面插入的标签会被识别成普通文字，不会显示预期的样式。 三、解决方案 1、富文本编辑器 <div contenteditable=true>这是一个假文本域<span style="color:red"&gt...
script标签在div中可以执行吗
fury的博客
10-13 1165
script标签可以放在HTML文档中的任何位置，包括在div标签内。但是，如果script标签在div标签内，script标签中的JavaScript代码可能会受到div标签本身的影响，例如在脚本执行之前该div标签可能尚未完全加载，或者它的父元素可能正在进行其他操作，导致脚本执行失败或产生不正确的结果。因此，为了确保脚本能够正确执行，建议将script标签放置在HTML文档的<head>或<body>标签中，或者使用异步或延迟属性来控制脚本的加载和执行时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值