The coding-guide from ecmadao

Table of Contents generated with DocToc

Menu
专题
License

个人学习笔记与博文

专题

JavaScript

关于项目

关于产品

Koa2系列教程

扩展：

Python3系列教程

扩展：

Gitbook

Python进阶

Ember文档翻译系列(V2.8.0)

算法 & ML

好玩的

Electron

优点：web写法（其实就是前端），一次书写可编译成多平台应用

缺点：打包后体积太大。经验不足的开发者容易把它做成和web没有太大差别，仅仅是外面套了个壳的应用。和原生应用相比，可获取的系统接口还是太少，一般情况下没有太大开发意义，产品易被网页版取代

优点：Redux鼻祖。纯函数式编程，简洁，漂亮。

缺点：学习和开发、维护成本偏高。很少运用于生产环境

React Native

优点：没玩过weex，除此以外RN是我见过的性能最好对React栈前端尤其友好的跨平台框架。生产环境下编译后应用运行速度不会比原生差很大。

缺点：交互弱。属于跨平台框架通病

React Times
- 源码
- 教程

一个React小时选择组件，支持24小时/12小时制

剁手党

【Hands Chopping】【剁手党】Python3编写的爬取淘宝/京东命令行工具。使用xpath + Selenium

Alfred TodoList

基于Mac神器Alfred的一个Todo App，使用Python2编写

优点：Alfred插件可以拿多种脚本语言编写，甚至可以和系统API联动

缺点：可惜的是目前Alfred还不支持Python3，以及对于第三方库的支持也不太友好。

一个Chrome扩展程序 + 对应的前后端（Koa2 + react），作用是快速保存页面或者页面上选择的文本，用于阅读文章时的摘记和整理

初版已部署上线：cliper、cliper chrome extension

github chrome 插件

提高 pull request 创建 / code review 体验，在仓库主页展示其大小和相关推荐的开源项目

download in chrome extension store

源码解读

大部分位于 github 仓库：code-analysis

redux 源码解析

状态管理插件，本质上就是一个函数库

blazy 源码解析

基于jQuery的图片懒加载插件

push.js 源码解析

一个兼容多平台多种类浏览器的 notification 插件

jquery.hotkeys 源码解析

一个依赖于 jQuery 的插件，提供按键监听

store.js 源码解析

通过封装localStorage API，提供了友好的操作，并兼容IE

nprogress 源码解析

一个在页面（或特定容器）顶部创建进度条的插件

object-assign 源码分析

Object.assign的ponyfill，兼容性很好

js-bits

使用代码解释JavaScript的概念，翻译自vasanthk/js-bits，已获得作者授权。

License

Apache License 2.0

【问题】有什么将网页转换为 PDF 的方法？

经过调研，我目前发现的方法如下（使用 Node ）：

利用 phantom.js 的 render
phantomjs-node，对 phantom.js 进行了一层封装

这是我尝试的目前效果最好的方法，可以直接自行封装一个脚本，由前端调用 API 后触发。但渲染速度不尽人意，不过也应该有一些优化的空间。

// demo
const phantom = require('phantom');

(async function() {
    const instance = await phantom.create();
    const page = await instance.createPage();

    await page.property('viewportSize', {width: 1024, height: 600});
    const status = await page.open('https://stackoverflow.com/');
    console.log(`Page opened with status [${status}].`);

    await page.render('stackoverflow.pdf');
    console.log(`File created at [./stackoverflow.pdf]`);

    await instance.exit();
}());

node-webshot

生成网页截屏。但只能是 png、jpg、jpeg 形式，且无法滚屏截图，只能指定图片高度或者按照窗口大小截取（目前没有找到合适的方式）

// demo
var webshot = require('webshot');

webshot('google.com', 'google.png', function(err) {
  // screenshot now saved to google.png
});

node-html-pdf

暂时还没有尝试，看见在 stackoverflow 上有人推荐，也有人反馈说该库有很奇怪的 bug

dom-to-image

相对于上面的方法，该库是在前端调用，将一个指定的 DOM 转为 base64 格式的图片，并可以保留其样式。但缺点很明显，由于是前端使用，在 DOM 数目较多时会有明显的卡顿，体验不好。

// demo
domtoimage.toJpeg(document.getElementById('my-node'))
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

stackoverflow 上的讨论 - HTML to PDF with Node.js
- phantomjs
- window.print()
- htmltocanvas 或者 rasterizeHTML，然后 jsPDF
- node-html-pdf

ecmadao / coding-guide Goto Github PK

coding-guide's Introduction

Menu

专题

JavaScript

关于项目

关于产品

Koa2系列教程

Python3系列教程

Python进阶

Ember文档翻译系列(V2.8.0)

算法 & ML

好玩的

源码解读

License

coding-guide's People

Contributors

Stargazers

Watchers

Forkers

coding-guide's Issues

Recommend Projects

Recommend Topics

Recommend Org