如何从html网页生成pdf？

Question

我正在寻找一个库,可以在从按钮点击事件后将我的网页转换为PDF文件.我正在尝试jspdf,但它打印没有CSS,我怎么能使用JavaScript/jQuery并保留我的CSS？还是我可以选择的另一个CSS？

Answer 1

有一个新的jQuery +云解决方案,可以将任何HTML页面及其CSS(包括打印媒体规则)呈现为PDF.解决方案设置为打印网页的任何区域,您只需告诉Formatter您要打印哪个容器元素,库就完成其余的工作.你得到的是一个可嵌入的PDF或后端将推回PDF下载.

这是你的库(GitHub):https:
//github.com/Xportability/css-to-pdf

这是你的小提琴:http:
//jsfiddle.net/kstubs/jrtM5/

这是一个有效的演示:http:
//xep.cloudformatter.com/doc/

目前没有使用说明,但是跟随样本(视图源)应该是非常明确的(查找"打印"按钮),这里或多或少是Format方法理解的附加选项/参数.

options 
{
    pageWidth: "8.5in",             
    pageHeight: "11in", 
    pageMargin: ".25in", 
    pageMarginTop: "1in",
    pageMarginRight: "1in",
    pageMarginBottom: "1in",
    pageMarginLeft: "1in",
    render: ("none"|"newwin<default>"|embed"|"download<default IE>"),
    foStyle: { 
        // puts fo style attributes on the root, ex. fontSize:14px
        foStyleName: 'value', ...
    }           
}

以下是当前支持的CSS属性列表.

[
    'lineHeight', 
    'alignmentBaseline', 
    'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
    'baselineShift', 
    'border',
    'borderWidth', 'borderColor','borderStyle',
    'borderTop','borderLeft','borderRight','borderBotttom',
    'borderTopWidth','borderTopStyle','borderTopColor', 
    'borderBottomWidth','borderBottomStyle','borderBottomColor',
    'borderLeftWidth','borderLeftStyle','borderLeftColor',
    'borderRightWidth','borderRightStyle','borderRightColor',
    'borderCollapse',             
    'clear', 'color', 
    'display', 'direction', 'dominantBaseline', 
    'fill', 'float', 
    'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily', 
    'listStyleType', 'listStyleImage', 'letterSpacing', 
    'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans', 
    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
    'pageBreakAfter', 'pageBreakBefore', 
    'tableLayout', 
    'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 
    'verticalAlign',
    'widows', 'wordSpacing', 'width'
]

希望这可以帮助!