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

html2pdf-browser

v1.0.2

Published

Take a screenshot and generate a PDF, solved the problem of SVG rendering and chinese text overlap.

Downloads

17

Readme

html2pdf-browser | 截屏并生成 pdf 文件

Take a screenshot and generate a PDF, solved the problem of SVG rendering and chinese text overlap.

截屏并生成 pdf, 解决了 svg 渲染和中文文本重叠问题

感谢 html2canvas, jspdf 库作者提供的工具, 这里主要对两个插件的能力进行封装以及解决使用阶段产生的问题.

Support

[TIP] 由于 pr 还未合并, 所以内置了一个从原始库中 fork 的 [email protected] 依赖, 后续 pr 合并后, 会还原到官方库

  1. 支持在浏览器内生成, 不需要额外添加 node 服务层

  2. 解决 <svg><use href='#id'></svg> 引用 svg 方式无法被 html2canvas 渲染转化问题

    • 特定场景: 使用如 svg-sprite-loader 插件, 加载 svg 资源
  3. 解决 html2canvas 渲染 svg 时, 设置 position: absolute; 导致的渲染内容残缺.

  4. 解决中文文字换行重叠问题。(中文符号体积计算渲染空间错误)

usage

  1. install
yarn add html2pdf-browser
# or
npm install html2pdf-browser
  1. use demo

注: 默认 scale(html2canvas 老版本的 dpi 参数) 为 4

await html2pdf(`filename.pdf`, el)

methods

| method | desc | | ----------- | ------------------------------------------------------------------------------ | | html2pdf | 将 html 转化为 pdf, 并触发下载 | | html2canvas | 将 html 转化为 canvas (对 html2canvas 库封装, 解决中文符号渲染和 svg 渲染问题) |

FAQ

  1. 浏览器兼容性

    继承 html2canvasjspdf 库的支持情况, 大多数浏览器环境内没什么问题

  2. 中文文本渲染

    这里通过为 <body> 节点设置一个 0.0001px的字间距, 解决计算中文符号占用空间与实际渲染空间不一致问题.