标签 Javascript 下的文章

2024-08-12




// 引入JSEncrypt库
const JSEncrypt = require('jsencrypt').JSEncrypt;
 
// 公钥，请替换为实际的公钥字符串
const publicKey = `-----BEGIN PUBLIC KEY-----
...
-----END PUBLIC KEY-----`;
 
// 创建JSEncrypt实例
const encryptor = new JSEncrypt();
 
// 设置公钥
encryptor.setPublicKey(publicKey);
 
// 需要加密的数据
const data = "这是需要加密的数据";
 
// 使用公钥进行加密
const encrypted = encryptor.encrypt(data);
 
console.log('加密数据:', encrypted);
 
// 输出加密结果，可以发送给服务器

这段代码展示了如何在Node.js环境中使用JSEncrypt库进行公钥加密。首先引入JSEncrypt库，然后设置公钥，接着使用公钥对数据进行加密，最后输出加密结果。这是一个典型的非对称加密的应用场景，在需要保护数据安全性的场景中非常有用。

- 阅读更多 -

前端直连小票打印机，前端静默打印，js静默打印解决方案

System

2024-08-12

所有,javascript

在前端直连小票打印机进行静默打印时，可以使用JavaScript中的window.print()方法结合CSS来实现。以下是一个简单的示例：

首先，你需要确保要打印的内容已经在页面上，并且该内容被一个HTML元素包裹。
然后，你可以通过JavaScript触发打印功能。

HTML部分：




<div id="receipt" style="display: none;">
  <!-- 小票内容 -->
  <h1>收银小票</h1>
  <p>商品名称: 商品描述</p>
  <p>单价: 100 元</p>
  <p>数量: 1 件</p>
  <p>合计: 100 元</p>
  <!-- 其他小票详细内容 -->
</div>
<button id="printBtn">打印小票</button>

JavaScript部分：




document.getElementById('printBtn').addEventListener('click', function() {
  var printWindow = window.open('', '_blank');
  printWindow.document.write('<html><title>小票</title>');
  printWindow.document.write('<style>body{margin:0;padding:0;font-family: "Courier New", Courier, monospace;}</style>');
  printWindow.document.write(document.getElementById('receipt').innerHTML);
  printWindow.document.write('</html>');
  printWindow.document.close();
  printWindow.focus();
 
  // 直接打印，不显示打印预览
  printWindow.print();
  printWindow.close();
});

在这个示例中，当用户点击按钮后，会创建一个新的窗口，并将小票内容写入新窗口的文档中。然后调用printWindow.print()方法进行打印，打印完成后关闭窗口。这样用户就不会看到打印预览页面，直接进行了打印。

请注意，由于涉及到直接打印，可能会受到浏览器和操作系统的安全限制，因此这种方法可能不适用于所有用户，尤其是在跨域或非用户交互的情况下打印时。此外，用户的打印机设置和浏览器设置也可能影响这种静默打印的效果。

- 阅读更多 -

js怎么判断是否为手机号?js格式校验方法

System

2024-08-12

所有,javascript

在JavaScript中，要判断一个字符串是否为手机号，可以使用正则表达式。以下是一个简单的函数，用于检查一个字符串是否符合大部分国家的手机号格式。




function isMobilePhone(value) {
  // 正则表达式匹配手机号
  const regex = /^1[3-9]\d{9}$/;
  return regex.test(value);
}
 
// 测试
console.log(isMobilePhone('13888888888')); // true 或 false
console.log(isMobilePhone('12345678901')); // false

这个函数假设中国的手机号码以数字1开头，第二位是3-9之间的数字，后面跟随9位数字。这个正则表达式仅适用于中国大陆的手机号，对其他地区可能需要调整正则表达式。如果需要匹配其他国家的手机号，需要提供相应的正则表达式规则。

- 阅读更多 -

【日常记录】【JS】前端预览图片的两种方式，Base64预览和blob预览

System

2024-08-12

所有,javascript




// 方法一：Base64预览
function previewBase64(base64) {
  // 创建一个Image元素
  const img = document.createElement('img');
  // 设置src属性为传入的base64字符串
  img.src = base64;
  // 将图片添加到页面上显示
  document.body.appendChild(img);
}
 
// 方法二：Blob预览
function previewBlob(blob) {
  // 将Blob对象转为URL
  const blobUrl = URL.createObjectURL(blob);
  // 创建一个Image元素
  const img = document.createElement('img');
  // 设置src属性为转换后的URL
  img.src = blobUrl;
  // 将图片添加到页面上显示
  document.body.appendChild(img);
  // 清除URL引用，避免内存泄露
  URL.revokeObjectURL(blobUrl);
}
 
// 示例：假设你有一个Base64编码的图片字符串
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
previewBase64(base64String);
 
// 示例：假设你有一个Blob对象表示的图片
const blob = new Blob([arrayBuffer], { type: 'image/png' });
previewBlob(blob);

这段代码展示了如何在前端使用JavaScript进行图片的Base64编码预览和Blob预览。previewBase64函数接收一个Base64编码的字符串，并将其显示在页面上。previewBlob函数接收一个Blob对象，创建一个URL指向该对象，然后在页面上显示图片，最后清除创建的URL以释放内存。

- 阅读更多 -

Vue3使用jsbarcode生成条形码，以及循环生成条形码

System

2024-08-12

所有,javascript

在Vue 3中，你可以使用jsbarcode库来生成条形码。首先，确保安装了jsbarcode：




npm install jsbarcode

然后，你可以在Vue组件中这样使用jsbarcode：




<template>
  <div>
    <canvas id="barcode"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import JsBarcode from 'jsbarcode';
 
export default {
  setup() {
    const barcode = ref(null);
 
    onMounted(() => {
      JsBarcode("#barcode", "123456789012");
    });
 
    return { barcode };
  }
};
</script>

如果你需要在循环中生成多个条形码，你可以为每个条形码的canvas提供一个唯一的id：




<template>
  <div v-for="item in items" :key="item.id">
    <canvas :id="`barcode-${item.id}`"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import JsBarcode from 'jsbarcode';
 
export default {
  setup() {
    const items = ref([{ id: 1, code: '12345' }, { id: 2, code: '67890' }]);
 
    onMounted(() => {
      items.value.forEach(item => {
        JsBarcode(`#barcode-${item.id}`, item.code);
      });
    });
 
    return { items };
  }
};
</script>

在这个例子中，items数组包含了条形码的数据，每个item都有一个唯一的id和条形码内容code。循环生成条形码时，我们使用item.id来为每个条形码的canvas设置唯一的id，并使用JsBarcode为每个条形码生成对应的内容。

System

2024-08-12

所有,javascript




// 前端代码实现（仅提供关键函数）
 
// 初始化WebSocket连接
function initWebSocket() {
    ws = new WebSocket("ws://localhost:8888"); // 替换为你的WebSocket服务器地址
    ws.onopen = function(evt) { onOpen(evt) };
    ws.onmessage = function(evt) { onMessage(evt) };
    ws.onerror = function(evt) { onError(evt) };
    ws.onclose = function(evt) { onClose(evt) };
}
 
// 发送文件数据
function sendFileChunk(file, chunk) {
    var message = {
        'filename': file.name,
        'totalChunks': totalChunks,
        'chunk': chunk
    };
    ws.send(JSON.stringify(message));
}
 
// 处理接收到的数据
function onMessage(evt) {
    var data = JSON.parse(evt.data);
    if (data.type === 'chunk') {
        // 处理分块数据
        handleIncomingChunk(data);
    } else if (data.type === 'ack') {
        // 处理确认消息
        handleAck(data);
    }
}
 
// 处理文件分块和确认
function handleIncomingChunk(data) {
    // 实现文件块的保存逻辑
}
 
function handleAck(data) {
    // 根据确认信息发送下一块数据
    sendNextChunk();
}
 
// 发送下一块数据
function sendNextChunk() {
    var file = files[currentFileIndex];
    if (chunkIndex < totalChunks) {
        var chunk = file.slice(
            chunkIndex * chunkSize, 
            (chunkIndex + 1) * chunkSize
        );
        sendFileChunk(file, chunk);
        chunkIndex++;
    } else {
        // 所有块已发送，等待服务器响应
    }
}
 
// 其他必要的函数和变量，例如onOpen, onError, onClose, 文件选择逻辑等
 
// 初始化
initWebSocket();

这段代码提供了一个简化的框架，用于处理文件的分块发送和接收。它展示了如何初始化WebSocket连接，以及如何处理文件的分块和确认。需要注意的是，这里没有实现文件块的实际保存逻辑，这部分需要根据应用的具体需求来实现。

- 阅读更多 -

轻量级数字动画插件CountUp.js。vue中使用

System

2024-08-12

所有,vue.js

在Vue中使用CountUp.js创建数字动画，首先需要安装CountUp.js库：




npm install countup.js --save

然后在Vue组件中引入并使用：




<template>
  <div>
    <span ref="countUpElement"></span>
  </div>
</template>
 
<script>
import CountUp from 'countup.js';
 
export default {
  mounted() {
    const options = {
      useEasing: true,
      useGrouping: true,
      separator: ',',
      decimal: '.',
    };
    const countUp = new CountUp(this.$refs.countUpElement, 1234567, options);
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
};
</script>

在这个例子中，我们创建了一个Vue组件，在mounted生命周期钩子中初始化了CountUp实例，并将动画应用于模板中的<span>元素。CountUp构造函数的第一个参数是DOM元素，第二个参数是目标数字，第三个参数是配置选项。动画在start方法调用后开始。

- 阅读更多 -

【Vue.js】 Mixin 局部混入与全局混入的介绍和使用总结以及优缺点分析

System

2024-08-12

所有,vue.js

在Vue.js中，Mixin是一种可以混入组件的方法，可以提供组件的可复用功能。

一、Mixin的定义

Mixin对象可以包含Vue实例中的任何选项，当组件使用Mixin时，Mixin中的选项会和组件中的选项合并。

二、Mixin的使用

局部混入：在组件中直接定义mixins属性。




// 定义mixin对象
var myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}
 
// 使用mixin
export default {
  mixins: [myMixin],
  created() {
    console.log('hello from component!')
  }
}

全局混入：通过Vue.mixin()定义全局mixin。




Vue.mixin({
  created() {
    console.log('hello from global mixin!')
  }
})
 
new Vue({
  created() {
    console.log('hello from component!')
  }
})

三、Mixin的优点和缺点

优点：

复用代码逻辑。
可以定义可复用的方法和数据。
可以在多个组件中使用同一个Mixin。

缺点：

命名冲突：如果两个mixin中有相同的方法或数据，那么组件中的会覆盖mixin中的。
可维护性问题：如果多个mixin中有相同的逻辑，可能会导致维护困难。
混入数据和方法：如果不正确管理，可能会导致应用的复杂性增加。

综上所述，Mixin在Vue.js中是一种很有用的工具，可以帮助我们更好地组织和复用代码。但在使用时需要注意避免命名冲突和维护问题。

System

2024-08-12

所有,vue.js

在React中，可以使用react-resizable库来实现一个可拖拽并且可调整大小的div。以下是一个简单的例子，演示如何实现这个功能：

首先，安装react-resizable库：




npm install react-resizable

然后，在React组件中使用它：




import React, { useState } from 'react';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';
 
const ResizableBox = () => {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);
 
  const onResize = (e, { size }) => {
    setWidth(size.width);
    setHeight(size.height);
  };
 
  return (
    <div>
      <Resizable
        width={width}
        height={height}
        onResize={onResize}
        draggableOpts={{
          cancel: 'div.no-drag',
        }}
      >
        <div className="no-drag">
          拖拽我改变大小
        </div>
      </Resizable>
    </div>
  );
};
 
export default ResizableBox;

在上面的代码中，Resizable组件是可拖拽和可调整大小的。width和height状态变量用于跟踪div的尺寸。onResize回调函数在每次大小更改时被调用，并更新尺寸状态。draggableOpts用于指定不可拖动的元素，例如div.no-drag。

要独立控制宽度，可以移除height相关的状态和事件处理，只保留宽度（width）相关的部分。

注意：react-resizable库需要依赖于react-draggable库，确保安装了所需的依赖。

- 阅读更多 -

Vue集成SpreadJS实现Excel（高级详解）

System

2024-08-12

所有,vue.js




<template>
  <div>
    <h2>Vue 集成 SpreadJS 示例</h2>
    <div ref="spreadSheetHost" style="width: 100%; height: 400px;"></div>
  </div>
</template>
 
<script>
import 'spreadjs-designer/designer.css';
import 'spreadjs-sheets/style/sheets.css';
import GC from 'spreadjs-gc';
import Spread from 'spreadjs-sheets';
 
export default {
  name: 'SpreadSheetDemo',
  mounted() {
    this.initSpreadSheet();
  },
  methods: {
    initSpreadSheet() {
      const spread = new GC.Spread.Sheets.Workbook(this.$refs.spreadSheetHost);
      // 设置 SpreadJS 的许可证密钥
      GC.Spread.Common.LicenseKey = '你的SpreadJS许可证密钥';
 
      // 设置工作表数量和名称
      spread.fromJSON({
        "sheets": [
          {
            "name": "Sheet1",
            "rows": 50,
            "columns": 20,
            "cells": [
              {
                "row": 0,
                "column": 0,
                "value": "Hello SpreadJS!"
              }
            ]
          }
        ]
      });
 
      // 设置 SpreadJS 的主题
      spread.options.theme = GC.Spread.Sheets.Theme.lightTheme;
 
      // 初始化 SpreadJS 组件
      spread.refresh();
    }
  }
};
</script>

这个代码实例展示了如何在Vue应用程序中初始化SpreadJS电子表格组件，并设置基本的工作表属性。在实际应用中，你需要替换"你的SpreadJS许可证密钥"为你从GrapeCity购买的有效许可证密钥。这个例子设置了一个包含一个工作表的简单电子表格，并在单元格A1中插入了文本"Hello SpreadJS!"。

- 阅读更多 -