Html PDF 页面打印方案

      WEB 项目中要求高精度打印,直接用 Html 输出太难调整格式,用 Word 或 Excel 打印只能在 IE 中使用,在网页上显示和支持得比较好的就算是 PDF 格式了。


1、项目需求:

(1) PDF 文件是根据后台 PDF 模板文件,在 WEB 前端动态填充生成的打印 PDF 文件;

(2)录入数据的表单是用 HTML 写的,每填写完一个字段,便生成一次 PDF,并刷新一次页面,做到录入数据与预览结果同步;

(3)支持预览和打印;

(4) 表单并不复杂,十多个字段。


2、选择技术方案

(1)首选 JS 直接修改 PDF 的方案,好象没有找到 API;

(2)选择 JS 调用 PDF 显示,传入字段值,由 PDF 加载的时候填充,好象 FDF 是用来解决该任务的,参考http://blog.csdn.net/tujiaw/article/details/51178393

   目前没测试通,郁闷。

(3)选择 PDF.JS 项目,貌似强大的项目,可以操作表单等,参考 https://github.com/mozilla/pdf.js

    缺点:页面显示效果不及 Chrome 自带的 PDF Viewer 显示精度高,缩略到 50% 几乎看不清;

(4)选择页面用 JSON 提交字段数据到 SPRINGMVC,在 Controller 中用 iText  填充 PDF 再传回前端,参考 http://www.tuicool.com/articles/nYrIVj

  缺点:数据传到后台,后台再传 PDF 文件过来,效率太低。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue项目中实现PDF文件的在线预览和打印功能的解决方案如下所示: 1. 首先,需要将后端返回的PDF文档流数据转换为正确的PDF格式数据。 2. 然后,引入并安装vue-pdf插件,可以通过npm命令进行安装:npm install --save vue-pdf。 3. 在Vue项目的页面中引入vue-pdf组件,并在components属性中注册该组件。 4. 在页面中使用vue-pdf组件进行PDF文件的预览和打印。可以使用<pdf>标签来包裹vue-pdf组件,并通过:src属性将转换好的PDF数据传入,例如:src="pdfUrl"。 5. 在预览的页面上添加打印按钮,可以通过调用vue-pdf提供的方法进行打印操作,例如在按钮的@click事件中调用$refs.pdf.print()方法。 6. 针对vue-pdf插件使用的iframe渲染存在的乱码问题,可以对其源文件进行修改来解决。 具体的代码示例如下: 引用: 第2步是下载及引入vue-pdf: ```javascript // 首先是安装vue-pdf npm install --save vue-pdf // 在页面引入 import pdf from 'vue-pdf' components: { pdf }, ``` 引用: 第3步是将转化好的PDF数据通过vue-pdf插件进行预览及打印: ```html <div v-if="src" style="overflow-y: auto;overflow-x: hidden;"> <!-- 打印直接调用vue-pdf里面的方法 --> <el-button type="primary" @click="$refs.pdf.print()" size="mini">打印</el-button> <el-button type="warning" plain @click="viewDia = false" size="mini">关闭</el-button> <div> <pdf ref="pdf" :src="pdfUrl"></pdf> </div> </div> ``` 通过以上步骤,您可以在Vue项目中实现PDF文件的在线预览和打印功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值