文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

使用HTML生成一个PDF实例代码

零下一度
发布： 2017-04-27 15:42:38
原创
3029人浏览过

小编大家带来一篇在html中优雅的生成pdf。

关键代码

<script type="text/javascript" src="http://myxdoc.sohuapps.com/xdoc.js"></script>   
<script id="myxdoc" type="text/xdoc" _format="pdf" style="width:100%;height:100%;">   
script中的内容是xdoc，说明见：http://myxdoc.sohuapps.com/xml.html
登录后复制

_format属性指定输出格式，还可以是flash、docx等，script中的属性可以使用xdoc可用的参数，style属性定义展示结果的样式。
这种方式将XDOC标记与HTML完美结合，输出pdf等文档与输出html完全相同。可以用jsp、php、asp、freemarker等动态输出文档。

<html> 
  <head> 
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://myxdoc.sohuapps.com/xdoc.js"></script> 
  </head>  
  <body style="height:100%; margin:0; overflow:hidden;"> 
    <script id="myxdoc" type="text/xdoc" _format="pdf" style="width:100%;height:100%;"> 
      <xdoc version="A.3.0"> 
        <paper margin="0" width="300" height="380"/>  
        <body padding="16" fillImg="#@f40">
          <para align="center">
            @@##@@
          </para>
          <para align="center">
            <text fontName="标宋" fontSize="18">[汤臣倍健]维生素C咀嚼片</text>
          </para>
          <para align="center">
            <text fontColor="#ff0000" fontName="标宋" format="c" fontSize="18">88</text>
          </para>
          <para align="center">
            <barcode type="QRCode" width="148" height="148" margin="8" value="http://h.ddky.com/shangpinxiangqing.html?shopId=100012&id=282740&skuId=28274001"/>
          </para>
        </body>
      </xdoc>
    </script> 
  </body> 
</html>
登录后复制

2. [图片] a.png                 

使用HTML生成一个PDF实例代码

使用HTML生成一个PDF实例代码

以上就是使用HTML生成一个PDF实例代码 的详细内容，更多请关注php中文网其它相关文章！

WPS零基础入门到精通全套教程！
WPS零基础入门到精通全套教程！

全网最新最细最实用WPS零基础入门到精通全套教程！带你真正掌握WPS办公！ 内含Excel基础操作、函数设计、数据透视表等

下载
来源：php中文网
收藏 点赞
上一篇：如何提取html的正文以及保留某些<>内容？ 下一篇：介绍html中定位fixed的实例代码
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
HTML属性怎么用？标签属性设置规范与实例解析 HTML属性以属性名="属性值"的形式写在开始标签中，用于提供元素的额外信息并修改其行为或外观。1.属性名不区分大小写，但建议使用小写以提高可读性。2.属性值通常用双引号括起，若无空格或特殊字符也可省略。3.常见属性包括id、class、style、src、href、alt、title、width、height、disabled和required等，分别用于标识元素、应用样式、指定资源路径、提供替代文本、显示提示信息、控制尺寸、禁用表单元素及标记必填项。4.命名规范要求使用小写属性名，属性值建议
2025-06-12 21:42:01
681
html中如何插入表单？表单制作步骤详解 在HTML中插入表单的方法包括：1.使用标签定义表单结构并设置action和method属性；2.添加文本框、密码框、单选按钮、复选框、下拉选择框及提交按钮等控件；3.通过name属性确保数据提交，并根据需求设置enctype属性及提交方式；4.利用HTML5验证属性或JavaScript进行表单验证，以保证输入数据的正确性。
2025-06-12 21:27:01
317
html中如何设置列表样式？列表美化方法详解 在HTML中设置列表样式主要通过CSS实现，具体步骤包括：1.去除默认样式以统一基础风格；2.使用list-style调整项目符号类型、位置及图片；3.通过伪元素自定义更丰富的装饰样式；4.保持结构与样式的分离以便维护。掌握这些方法后，可以有效提升列表的美观性与用户体验。
2025-06-12 21:03:01
407
html中href的用法 超链接href的5种参数写法 href属性有五种参数写法：1.绝对URL，适用于外部网站链接；2.相对URL，适用于同一网站内链接；3.锚点链接，用于页面内导航；4.邮件链接，直接发送电子邮件；5.电话链接，适用于移动设备拨号。
2025-06-12 20:39:01
107
怎样在HTML里创建响应式网格布局 要在HTML中创建响应式网格布局，应使用CSSGrid或Flexbox。1)使用CSSGrid创建网格容器并定义列的自动填充和最小最大宽度。2)通过媒体查询调整小屏幕布局。3)注意浏览器兼容性和CSS复杂性，逐步增加布局复杂性，并使用预处理器管理CSS。
2025-06-12 20:03:01
798
html中如何首行空两格 段落首行缩进的4种实现方案 在HTML中实现段落首行空两格可以使用四种方法：1.CSS的text-indent属性（p{text-indent:2em;}），简洁通用但只影响首行；2.HTML的非断行空格（  内容），无需CSS但代码冗长；3.CSS的padding-left属性（p{padding-left:2em;}），可控制整个段落但可能影响布局；4.CSS的:first-line伪元素（p:first-line{text-indent:2em;}），精确但兼容性较差。
2025-06-12 19:39:01
327
html中文字居中的标签 居中标签center的替代方案 在HTML中，替代标签的方法有三种：1.使用CSS的text-align属性实现水平居中；2.结合line-height属性实现单行文字的垂直和水平居中；3.使用flexbox或grid布局实现多行文字的垂直和水平居中，这些方法更灵活且符合现代网页开发标准。
2025-06-12 19:27:01
451
html中hover怎么用 css悬停效果的4种实现方式 在HTML中使用CSS悬停效果可以通过:hover伪类实现。1.基本颜色变化：通过改变元素颜色，适用于按钮和链接。2.动画过渡效果：使用transition属性实现平滑过渡，提升用户体验。3.阴影效果：通过box-shadow属性添加阴影，增强元素立体感。4.复杂动画效果：使用@keyframes和animation属性实现复杂动画，如旋转和缩放。
2025-06-12 18:39:01
982
HTML下拉菜单怎么做？select和option标签怎么配合使用？ 下拉菜单在网页中通过select和option标签实现，基本结构是用select包裹多个option，每个option代表一个可选项。1.默认选中第一个选项，若需指定默认值，可在对应option添加selected属性；2.获取选中值可通过为select设置name或id，配合表单提交或JavaScript操作获取；3.可使用disabled属性禁用某些选项，提升用户体验；4.若选项较多，可用optgroup对选项进行分组展示，使界面更清晰易读。这些细节处理得当，有助于提升用户交互体验。
2025-06-12 18:36:02
963
html中如何调整表单间距？表单布局修改指南 调整表单间距可通过1.使用CSS控制垂直间距；2.用flex或inline-block调整水平距离；3.使用Grid或表格布局对齐表单；4.通过媒体查询优化移动端适配。在网页设计中，表单的排版直接影响用户体验，默认布局常显得紧凑混乱，解决方法是通过CSS控制元素间距和整体布局，例如给包裹表单元素的容器添加margin实现统一垂直间距，或使用flex布局配合gap属性设置标签与输入框的水平距离，对于需要严格对齐的场景可采用Grid或table布局，最后还需通过媒体查询为移动端增加间距以提升操作体验
2025-06-12 18:27:01
398
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部