页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

PDF网页在线阅读器pdfjs

其他特效 HTML我帮您 1年前  次浏览
pdfjs是PDF网页在线阅读器,直接本地或远程加载PDF,设置输出文本字体、自适应页面显示、自定义头部底部显示。 PDF网页在线阅读器pdfjs
var doc = new pdfjs.Document({
  font: assets.openSansRegular
})

var tr, td, text

var header = doc.header()
table = header.table({ widths: ['50%', '50%']})
tr = table.tr()
tr.td('pdfjs', { font: assets.openSansBold })
tr.td('github.com/rkusa/pdfjs', { font: assets.openSansLight, textAlign: 'right' })

var footer = doc.footer()
footer.text({ textAlign: 'center' }).pageNumber().append('/').pageCount()

doc.image(assets.logo, { width: 128 })

text = doc.text({
  fontSize: 14, lineSpacing: 1.35
})

text.add('Content can be composed of')
text.add('different', { font: assets.openSansBold })
text.add('fonts', { font: assets.sourceCodeProMedium })
text.add('and')
text.add('different', { fontSize: 10 })
text.add('sizes', { fontSize: 18 })
text.add('.')

var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem quae Peripatetici, verba. Tenesne igitur, inquam, Hieronymus Rhodius quid dicat esse summum bonum, quo putet omnia referri oportere? Quia nec honesto quic quam honestius nec turpi turpius.'

doc.text(new Array(2).join(lorem + '\n\n'), {
  fontSize: 14, lineSpacing: 1.35, textAlign: 'justify', color: 0xdddddd
})

table = doc.table({
  headerRows: 1, fontSize: 14,
  borderHorizontalWidth: 0.1,
  widths: ['10%', '10%', '50%', '15%', '15%']
})

tr = table.tr({ font: assets.openSansBold, borderBottomWidth: 1.5 })
tr.td('#')
tr.td('Unit')
tr.td('Subject')
tr.td('Price')
tr.td('Total')

var rows = [
  {
    quantity: 2,
    name: 'Article A',
    description: lorem,
    price: 500
  },
  {
    quantity: 1,
    name: 'Article B',
    description: lorem,
    price: 250
  },
  {
    quantity: 3,
    name: 'Article C',
    description: lorem,
    price: 750
  }
]

rows.forEach(function(row) {
  tr = table.tr()
  tr.td(row.quantity)
  tr.td('pc.')

  var article = tr.td().text()
  article.add(row.name, { fontSize: 14, font: assets.openSansBold })
         .br()
         .add(lorem, { fontSize: 11, textAlign: 'justify' })

  tr.td(row.price.toFixed(2) + ' €', { textAlign: 'right' })
  tr.td((row.price * row.quantity).toFixed(2) + ' €', { textAlign: 'right' })
})

var pdf = doc.render()

document.querySelector('#preview').setAttribute('src', pdf.toDataURL())

相关链接

发表评论