卡片阅读器（card-reader）是一款可以读取身份证、银行卡等卡片信息的前端组件，使用 npm 包可以快速引入到项目中使用，本文将详细介绍 npm 包 card-reader 的使用方法。
安装
首先，在项目中安装 card-reader 包：
npm install card-reader --save
使用
引入 card-reader 组件：
import cardReader from 'card-reader';
创建一个包含阅读器的 div：
<div id="card-area"></div>
使用 card-reader 的 init 方法，并传入阅读器 div 作为参数，初始化组件：
let cardArea = document.querySelector('#card-area');
let reader = cardReader.init(cardArea);调用 reader 的 readCard 方法，读取卡片信息：
reader.readCard((data) => {
console.log(data);
}, (error) => {
console.error(error);
});传入两个回调函数，第一个回调函数在读卡成功后触发，第二个回调函数在读卡失败时触发。
卡片信息是以 JSON 对象形式返回的。
API
init
初始化 card-reader 组件。
cardReader.init(container: HTMLElement, config?: Config): Reader;
参数
- container: 装载阅读器的 HTML 元素。
- config: 可选参数，阅读器配置项。
返回值
返回一个 Reader 对象，可用于读卡操作。
Reader
Reader 对象用于读卡，包含以下方法：
readCard
读取卡片信息。
readCard(resultCallback: ResultCallback, errorCallback: ErrorCallback): void;
参数
- resultCallback: 读卡成功回调函数。
- errorCallback: 读卡失败回调函数。
返回值
void。
Config
配置项对象，可设置阅读器的配置：
interface Config {
debug?: boolean;
forceUsage?: boolean;
readTimeout?: number;
}属性
- debug: 是否开启调试模式，默认为 false。
- forceUsage: 是否强制使用阅读器，即使不能正常读卡，默认为 false。
- readTimeout: 读卡超时时间，单位为毫秒，默认为 30000。
示例代码
完整调用示例：
-- -------------------- ---- ------- ------ ---------- ---- -------------- -- ----- --- -------- - ------------------------------------- --- ------ - -------------------------- -- ------- ---------------------- -- - ------------------ -- ------- -- - --------------------- ---
设置阅读器的配置项：
-- -------------------- ---- ------- --- -------- - ------------------------------------- --- ------ - - ------ ----- ----------- ----- ------------ ----- -- --- ------ - ------------------------- -------- ---------------------- -- - ------------------ -- ------- -- - --------------------- ---
结语
卡片阅读器是一个十分实用的前端组件，可以方便地读取身份证、银行卡等卡片信息。使用 npm 包 card-reader 可以快速引入到项目中使用，大大减轻了前端开发的工作量，希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde5aa0