• 轻松实现PDF文件的在线浏览

    福昕软件最近发布了一款名为Cloud API的产品，通过几行代码即可轻松实现PDF文件的在线浏览。先一睹为快吧。

    简介

    先看看产品官网：福昕 Cloud API

    Cloud API包括两个形态产品，一个是在线的PDF查看工具，叫PDF Embed  API,另外一个是PDF Services API.我们就先看看PDF查看工具，PDF Embed  API吧。

    这个PDF在线在查看工具提供了几种模式的PDF嵌入功能：全屏窗口显示，已指定尺寸嵌入网页显示，内联显示，以及弹出框方式显示PDF.

    那么如何使用我们，第一步我们需要注册一个开发者账户

    账户注册

    在线文档有详细的说明，参考这里：福昕 Cloud API

    注册有很多入口都可以，我直接在手册页面点击控制台，就弹出页面让我登录或注册了。

    后面竟然弹出英文页面，将就吧！

    微信最方便了，哈选择微信扫码即可进入，

    点击同意，确定，即可注册成功啦，进来了

    凭据获取

    我想做在线预览，因此

    噼噼啪啪，输入创建，第一个工程就创建好了！

    点击编辑即可获得客户端ID，以及密钥ID

    直接在项目上点复制图标也可以复制端ID，不急这个后面用到。

    注册完了，我们就进入下一步了，怎么显示呢？

    显示一个PDF文件

    我是用node.js来做尝试

    下面是index.html的源代码

    1. html>
    2. <html lang="en">
    3. <H1>Foxit EMBAPI DemoH1>
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta
    7.           name="viewport"
    8.           content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    9.   />
    10.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    11.   <meta name="renderer" content="webkit" />
    12.   <title>Developer Guide title>
    13.   <style>
    14.     html,
    15.     body {
    16.       width: 100%;
    17.       height: 100%;
    18.     }
    19.     #foxit-embed-view {
    20.       height: 100%;
    21.     }
    22.   style>
    23. head>
    24. <body>
    25. <div id="foxit-embed-view">div>
    26. <script src="https://servicesapi.foxitsoftware.cn/api/embview-sdk/js?clientId=********************">script>  //用你自己的客户端ID
    27. <script>
    28.   var embedView = new FoxitEmbed.View({
    29.     clientId: '<********************>',  //用你自己的客户端ID
    30.     divId: 'foxit-embed-view',
    31.   });
    32.   var pdfUrl = 'FoxitPDFSDKDeveloperGuide_c++_CN.pdf';  //记得替换成自己的文件
    33.   embedView.previewFile(
    34.           {
    35.             content: pdfUrl,
    36.             metaData: {
    37.               fileName: 'sample.pdf',
    38.             },
    39.           },
    40.           {
    41.             showToolControls: true,
    42.             showLeftHandPanel: true,
    43.             showDownloadPDF: false,
    44.             showPrintPDF: true,
    45.             theme: { primaryColor: '#f36b16', secondaryColor: '#333333', textActiveColor: '#FFFFFF' },
    46.           },
    47.   );
    48. script>
    49. body>
    50. html>

    运行，顺利显示PDF文件

    简简单单~~

  • 相关阅读:
    如何快速同步第三方平台数据？
    干货！深度学习模型的水印和验证
    编译VTK静态库
    Ubuntu小知识总结
    java 程序CPU过高，问题排查解决
    基于react-markdown组件自定义一个Markdown显示器
    壳聚糖载抗生素水凝胶/接枝Nogo-A抗体的温敏型壳聚糖水凝胶/巯基化壳聚糖水凝胶的制备
    3GPP R17覆盖增强
    javaScript 中的宏任务、微任务
    济南大学计算机考研资料汇总
  • 原文地址：https://blog.csdn.net/lzfly/article/details/139260701