npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fe-invoice-preview

v0.1.0

Published

发票预览

Downloads

2

Readme

发票预览

介绍

适用于业务需求中需要进行发票预览,包含普票、专票的预览, 调用方法返回预览信息的dom结构,支持CommonJS, AMD, script tag的使用.兼容IE11.

安装

npm install invoice-preview

本地调试

  • 引入项目中调试

先git clone将项目下载至本地,然后通过npm link [此项目存放路径],即可引入使用本项目,后续如下。
如有有使用异常,删除包,尝试清空缓存问题, npm cache clean -f

  • 本包单独调试

git clone;
修改~/src/index.js代码
npm run build
浏览器中打开~/test/index.html查看实际效果

使用方式

import invoicePreview from 'invoice-preview'

const previewInfo = {
  type: 'common', // 普票 || 专票 'common' || 'special'
  header: {},
  content: {},
  footer: {}
}
// previewInfo: _要预览的发票信息_
const htmlStr = invoicePreview(previewInfo)
// 将接收到的htmlStr放进Modal或者指定的dom节点中
document.getElementById('preShow').innerHTML = htmlStr

示例

根目录下test文件夹中index.html中可以预览

注意

实际要预览的数据各字段名需要与当前代码一一对应

const info = {
  type: 'common',
  header: {
    address: '北京',
    checkCode: '11111 22222 33333',
    billingDate: '2022年02月24日',
    NO: '12345678',
    qrCodeUrl: 'https://img-blog.csdnimg.cn/20200303093515975.png',
    num1: '011001800305',
    num2: '14903841'
  },
  content: {
    seller: {
      name: '飞机撒弗兰克',
      num: '4721212313ERWEWEWR',
      tel: '18211111111',
      account: '21212121212'
    },
    psw: '97323>*dajkdkj<<dakldkadl\>\<\\dasdasddaskdlsak*daskdlasdk128912u31823-=-0-=->8',
    list: [
      {
        title: '*经济代理服务*服务费',
        model: '型号',
        unit: '个',
        num: 1,
        price: 12.34,
        total: 34234.343,
        taxRate: '6%',
        tax: 1212.42
      },
    ],
    totalAmount: 234.234,
    totalTaxRate: 12.34,
    total: {
      upCase: '壹拾贰万叁千肆佰伍',
      lowerCase: '12345.00'
    },
    buyer: {
      name: '飞机撒弗兰克',
      num: '4721212313ERWEWEWR',
      tel: '18211111111',
      account: '21212121212'
    },
    mark: '22032323323232323-40 323232'
  },
  footer: {
    payee: '郑晓茜',
    review: '郑晓茜',
    issuer: '郑晓茜',
    seller: ''
  }
}

CHANGELOG