17pdf_front_end/pages/sdk.vue

<template>
  <div class="sdk_nav">
    <!-- 头部 -->
    <div class="sdk_banner text-center bg-[#232748]">
      <h1 class="font-600 text-50px leading-44px pt-114px text-white">为开发者设计的SDK & API解决方案</h1>
      <div class="text-30px leading-38px max-w-911px text-[#DBDBDB] mx-auto pt-40px">
        提供给企业的专业PDF解决方案, 支持本地、在线、私有化部署PDF编辑、注释、评论、格式转换、签名、文档对比、标记密文、OCR、测量等功能到所有开发平台中，并且支持跨平台开发。
      </div>
      <div class="max-w-560px mx-auto mt-72px pb-114px flex">
        <div class="dynamic w-260px bg-white text-[#232748] leading-50px rounded-8px text-16px font-500 hover:bg-[#FCD980] cursor-pointer" 
        @click="handlerApplyUse('trial')">
          免费试用
          <span class="dynamic-icon"></span>
        </div>
        <div class="dynamic ml-40px w-260px border border-2 text-[#FFFFFF] leading-50px rounded-8px text-16px font-500 hover:(bg-[#FCD980] border-[#FCD980] text-[#000]) cursor-pointer" 
        @click="handlerApplyUse('quote')">
          联系销售
        </div>
      </div>
    </div>
    <Platform />
    <h3 class="text-[#232748] font-600 text-center my-0 mx-auto lg:(mt-80px text-44px leading-56px max-w-916px) <lg:(mt-52px mb-24px text-20px leading-28px)">
      全面且强大的PDF SDK & API技术，为您创建想要的PDF阅读器&编辑器
    </h3>
    <Feature class="container-sdk" @open="handlerApplyUse('trial')"></Feature>
    <!-- 平台 -->
    <div class="bg-[#F7F9FD] pb-80px pt-50px">
      <div  class="container-sdk flex justify-between flex-wrap">
        <div v-for="(item, index) in platformList" :key="index" class="w-[31.5%] flex flex-col justify-between py-32px px-20px rounded-4px bg-[#fff] mt-30px">
          <div>
            <div class="flex items-center">
              <img :src="item.src" :alt="item.title" width="32" height="32">
              <div class="ml-12px font-600 text-18px leading-22px text-[#232748]">{{item.title}}</div>
            </div>
            <div class="sdk_platform mt-16px text-14px leading-20px text-[#232748]" v-html="item.des">
            </div>
          </div>
          <div class="platform_apply flex flex-row-reverse items-center mt-16px text-16px leading-20px text-[#396FFA]" @click="handlerApplyUse('trial')">
            <Right class="ml-8px" />
            申请试用
          </div>
        </div>
      </div>
    </div>
    <!-- 代码 -->
    <div class="bg-[#F7F9FD]">
      <div class="container-sdk py-80px container-plus flex justify-between items-center">
        <CodePreviewIndexNew :platform="'Windows'" :devices="devices" :language="language" :languageIndex="languageIndex" :code="codeNew" />
        <div class="w-[44%] ml-94px">
          <h3 class="text-44px leading-56px text-[#232748] font-600 ">全平台PDF开发工具包</h3>
          <TextParagraph class="max-w-500px text-16px leading-28px text-[#52555F] mt-24px mb-32px">
            缩短项目开发时间、快速投入市场，简单代码即可集成我们的PDF库，为您的Windows、Web、Android、iOS、Mac Catalyst、Server、Flutter、Electron等app实现想要的PDF功能。
          </TextParagraph>
          <div class="platform_apply move-arrow flex items-center text-16px leading-24px text-[#396FFA] font-500" @click="handlerApplyUse('trial')">申请试用<Right class="ml-8px" /></div>
        </div>
      </div>
    </div>
    <client-only>
      <!-- 弹出框 -->
      <el-dialog 
        :visible.sync="modalViable"
        :close-on-press-escape="false"
        @close="$refs.sdkForm.doClose()"
        :lock-scroll="false"
	      :append-to-body="true"
        top="5vh"
        width="742px"
        :destroy-on-close="false"
      >
        <sdk-form ref="sdkForm" :labelText = "labelText"></sdk-form>
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import sdkForm from '~/components/SdkForm.vue'
import Feature from '~/components/sdk/Feature.vue'
import Platform from '~/components/sdk/Platform.vue'
import Right from '~/assets/images/tools/right.svg?inline'
export default {
  components: { 
    sdkForm,
    Platform,
    Feature,
    Right
  },
  middleware:'user',
  data() {
    return {
      modalViable: false,
      computedH: '',
      active: 0,
      labelText: '',
      language: 'C# WPF',
      devices: ['Windows', 'Web', 'Android', 'iOS', 'Mac'],
      languageIndex: 0,
      codeNew: {
        iOS: {
          'Objective-C': [
            `<span class="keyword">NSString</span>* pdfPath = <span class="string">@"</span>...<span class="string">"</span>;`,
            `<span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>`,
            `<span class="keyword">NSURL</span>* url = [<span class="keyword">NSURL</span> fileURLWithPath: pdfPath];`,
            `CPDFDocument* document = [[[CPDFDocument alloc] initWithURL:url] autorelease];`,
            `<br/>`,
            `<span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>`,
            `CPDFView* pdfView = [[[CPDFView alloc] initWithFrame:self.view.bounds] autorelease];`,
            `pdfView.document = document;`
          ],
          Swift: [
            `<span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>`,
            `<span class="string">let</span> document: CPDFDocument? = CPDFDocument.<span class="string">init</span>(url: filePath)`,
            `<br/>`,
            `<span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>`,
            `<span class="string">let</span> pdfView: CPDFView? = CPDFView.<span class="string">init</span>(frame: <span class="string">self</span>.<span class="title">view</span>.<span class="title">bounds</span>) `,
            `pdfView?.<span class="title">document</span> = document`
          ]
        },
        Android: {
          Java: [
            `<span class="comment">// Get CPDFReaderView from xml</span>`,
            `CPDFReaderView readerView <span class="title">=</span> findViewById<span class="title">(</span>R.<span class="title">id</span>.<span class="title">readerview);</span>`,
            `CPDFDocument document <span class="title">=</span> <span class="keyword">new</span> CPDFDocument<span class="title">(</span>context<span class="title">);</span>`,
            `<br/>`,
            `<span class="comment">//Open document.</span>`,
            `document.<span class="keyword">open</span><span class="title">(</span>pdfUri<span class="title">);</span>`,
            `<br/>`,
            `<span class="comment">// Set the PDF document type to CPDFReaderView</span>`,
            `readerView.<span class="title">setPDFDocument(</span>document<span class="title">);</span>`
          ],
          Kotlin: [
            `<span class="comment">// Get CPDFReaderView from xml</span>`,
            `<span class="keyword">val</span> readerView <span class="title">=</span> findViewById<span class="title">(</span>R.<span class="title">id</span>.<span class="title">readerview)</span>`,
            `<span class="keyword">val</span> document <span class="title">=</span> CPDFDocument<span class="title">(</span>context<span class="title">)</span>`,
            `<br/>`,
            `<span class="comment">//Open document</span>`,
            `document.<span class="keyword">open</span><span class="title">(</span>pdfUri<span class="title">)</span>`,
            `<br/>`,
            `<span class="comment">// Set the PDF document type to CPDFReaderView</span>`,
            `readerView.<span class="title">setPDFDocument(</span>document<span class="title">)</span>`
          ]
        },
        Windows: {
          'C# WPF': [
            `<span class="string">string</span> filePath <span class="title">=</span> "<span class="title">***</span>"<span class="title">;</span>`,
            `<span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>`,
            `CPDFDocument document = CPDFDocument<span class="title">.</span><span class="keyword">InitWithFilePath</span><span class="title">(</span>filePath<span class="title">);</span>`,
            `<br/>`,
            `<span class="comment">// Initialize a CPDFViewer object and display it</span>`,
            `CPDFViewer pdfViewer <span class="title">= new</span> CPDFViewer<span class="title">();</span>`,
            `pdfViewer<span class="title">.</span><span class="keyword">InitDocument</span><span class="title">(</span>document<span class="title">);</span>`,
            `pdfViewer<span class="title">.</span><span class="keyword">Load</span><span class="title">();</span>`
          ],
          'C# UWP': [
            `<span class="string">var</span> localFile <span class="title">= new</span> Uri<span class="title">(</span><span class="statement">"ms-appx:///Assets/***.pdf"</span><span class="title">);</span>`,
            `StorageFile file <span class="title">=</span> <span class="string">await</span> StorageFile<span class="title">.</span><span class="string">GetFileFromApplicationUriAsync</span><span class="title">(</span>localFile<span class="title">);</span>`,
            `<br/>`,
            `<span class="comment">//Open the PDF file and display it in CPDFViewer</span>`,
            `CPDFViewer pdfViewer <span class="title">= new</span> CPDFViewer<span class="title">();</span>`,
            `pdfViewer<span class="title">.</span><span class="string">OpenFile</span><span class="title">(</span>file<span class="title">);</span>`
          ]
        },
        Mac: {
          'Objective-C': [
            `<span class="keyword">NSString</span>* pdfPath = <span class="string">@"</span>...<span class="string">"</span>;`,
            `<span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>`,
            `<span class="keyword">NSURL</span>* url = [<span class="keyword">NSURL</span> fileURLWithPath: pdfPath];`,
            `CPDFDocument* document = [[[CPDFDocument alloc] initWithURL:url] autorelease];`,
            `<br/>`,
            `<span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>`,
            `CPDFView* pdfView = [[[CPDFView alloc] initWithFrame:self.view.bounds] autorelease];`,
            `pdfView.document = document;`
          ],
          Swift: [
            `<span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>`,
            `<span class="string">let</span> document: CPDFDocument? = CPDFDocument.<span class="string">init</span>(url: filePath)`,
            `<br/>`,
            `<span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>`,
            `<span class="string">let</span> pdfView: CPDFView? = CPDFView.<span class="string">init</span>(frame: <span class="string">self</span>.<span class="title">view</span>.<span class="title">bounds</span>) `,
            `pdfView?.<span class="title">document</span> = document`
          ]
        },
        Web: {
          JavaScript: [
            `<span class="keyword">import</span> CPDF from <span class="string">'/@cpdf/webviewer'</span>;`,
            `<br/>`,
            `<span class="keyword">const</span> viewer = document.getElementById(<span class="string">'webviewer'</span>);`,
            `<span class="comment">// Initialize CPDF Web viewer and load your pdf</span>`,
            `CPDF.init({`,
            `  pdfUrl: <span class="string">'Your PDF Url'</span>,`,
            `}, viewer)`,
            `.then((core) => {`,
            `  <span class="keyword">const</span> docViewer = core.docViewer;`,
            `})`
          ]
        }
      },
      platformList :[
        {
          src: require('~/assets/images/tools/windows.svg'),
          title: 'Windows PDF编辑SDK',
          des: '提供专业的<span style="font-weight: 600; color: #396FFA">C#</span>、<span style="font-weight: 600; color: #396FFA">VB</span>和<span style="font-weight: 600; color: #396FFA">C++</span> SDK库，让您轻松快速地将PDF基础功能和高阶功能集成到Windows应用程序中，包含所有PDF功能和高阶功能，比如文本编辑、图片编辑、PDF转Office/图片、数字签名、OCR、文档对比、密文标记等。独立的PDF技术，无需依赖Adobe Acrobat。'
        },
        {
          src: require('~/assets/images/tools/web.svg'),
          title: 'Web PDF阅读SDK',
          des: '提供专业的<span style="font-weight: 600; color: #396FFA">JavaScript</span> PDF SDK，加速您Web应用程序开发，允许您的网页用户在任何设备上打开、阅读、标注、填写、签署、对比PDF文件等。支持所有的浏览器（Chrome, Edge, Firefox, Safari等）和主流的Web框架（Electron, Vue, Nuxt, React, Next, Svelte, Angular, ionic angular等）。'
        },
        {
          src: require('~/assets/images/tools/android.svg'),
          title: 'Android PDF SDK',
          des: '集成我们的<span style="font-weight: 600; color: #396FFA">Kotlin</span>和<span style="font-weight: 600; color: #396FFA">Java</span>库，简单地将PDF功能集成到您安卓应用程序中，为您的app用户提供PDF阅读、编辑、注释、填写表单，签名等基础功能，和文档编辑、格式转换、OCR等高级功能。'
        },
        {
          src: require('~/assets/images/tools/ios.svg'),
          title: 'iOS PDF编辑SDK',
          des: '使用专业的<span style="font-weight: 600; color: #396FFA">Objective-C</span>和<span style="font-weight: 600; color: #396FFA">Swift</span> PDF SDK，帮助您轻松开发iOS PDF阅读器&编辑器，允许阅读PDF、编辑、注释、填写表单、签名、和格式转换等。'
        },
        {
          src: require('~/assets/images/tools/mac.svg'),
          title: 'Mac Catalyst PDF编辑SDK',
          des: '为Mac Catalyst平台提供<span style="font-weight: 600; color: #396FFA">Swift</span>和<span style="font-weight: 600; color: #396FFA">Objective-C</span>库开发全面的PDF功能，与iOS应用程序共享相同的代码库，降低维护成本。为您的app用户提供全面的、专业的PDF处理功能。'
        },
        {
          src: require('~/assets/images/tools/electron.svg'),
          title: 'Electron PDF SDK',
          des: '综合的<span style="font-weight: 600; color: #396FFA">JavaScript</span> PDF处理库，支持在Electron平台上提供跨Cloud, Windows, Mac, Linux, 和Chromebook的PDF开发体验。支持为Electron app实现所有你能想到的处理PDF的功能，并利用Electron的桌面特性进行自定义。'
        },
        {
          src: require('~/assets/images/tools/flutter.svg'),
          title: 'Flutter PDF SDK',
          des: '使用专业的<span style="font-weight: 600; color: #396FFA">Flutter</span>库，将PDF功能集成到您的iOS和Android应用程序中，享受Flutter灵活的开发体验、高性能、和美观的界面，实现PDF的预览、编辑、签名、密文标记、注释等功能'
        },
        {
          src: require('~/assets/images/tools/server.svg'),
          title: 'Server端PDF转档、编辑SDK',
          des: '为Server平台提供可靠的<span style="font-weight: 600; color: #396FFA">Java</span>，<span style="font-weight: 600; color: #396FFA">.NET Core</span>，和命令行工具等解决方案处理PDF文件，支持多线程和分布式环境。在Server应用程序中实现PDF的生成、查看、编辑、版本对比、OCR、转档等功能'
        },
        {
          src: require('~/assets/images/tools/api.svg'),
          title: 'PDF API',
          des: '专业的<span style="font-weight: 600; color: #396FFA">HTTP API</span>可以让您轻松快速地将PDF功能集成到所有开发平台的应用程序中，无需担心编程语言与API是否兼容的问题。支持远程调用和私有化部署。'
        }
      ] 
    }
  },
  head() {
    return {
      title: 'PDF SDK/API解决方案: 全面PDF功能、全平台、跨平台集成',
      meta: [
        {
          name: 'keywords',
          hid: 'keywords',
          content: 'PDF SDK, PDF Library, pdf开发包, PDF Kit, PDF解决方案'
        },
        {
        hid: 'description',
        name: 'description',
        content: '17PDF Reader提供全平台、跨平台整合PDF阅读器核心功能到你的App中， 支持文件阅读、注释、扫描、数字签名、加密、OCR、文本编辑、表单填写、文件合并、文件分割等各种功能集成，让你的工具更强大！'
       },
      ]
    }
  },
  methods: {
    handlerApplyUse(labelText) {
      this.labelText = labelText
      this.modalViable = true
    }
  },

}
</script>

<style lang="scss" scoped>
.sdk_nav {
  font-family: PingFang SC;
  .sdk_banner {
    background: url('~/assets/images/sdk/banner.png') center no-repeat;
    background-size: cover;
  }
  .sdk_platform {
    font-family: Poppins;
  }
  .platform_apply {
    cursor: pointer;
    svg {
      transition: all 0.25s ease-out;
    }
    &:hover svg {
      transform: translateX(8px);
    }
  }
}
@import '@/assets/mixins.scss';
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 930px) {
  .container {
    max-width: 930px;
    min-width: 900px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}
.dynamic {
  .dynamic-icon {
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 8px;

    &::after,
    &::before {
      position: absolute;
      transition: all 0.25s ease-out;
      box-sizing: border-box;
      border-top: 2px solid #232748;
    }

    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-left: 2px solid #232748;
      right: -15px;
      top: 50%;
      transform: translateY(-50%) rotate(135deg);
    }

    &::after {
      content: '';
      width: 11px;
      height: 2px;
      left: -1px;
      top: 50%;
      transform: translateY(-50%) rotate(-65deg);
    }
  }
  &:hover {
    .dynamic-icon {
      &::after {
        transform: translateY(-50%);
        left: 0px;
      }
    }
  }
}
</style>