compdfkit_web_cn/pages/index.vue

<script>
import Parallax from 'parallax-js'
import Viewing from '~/assets/images/home/ic_features_view.svg?inline'
import Annotations from '~/assets/images/home/ic_features_annotations.svg?inline'
import Signatures from '~/assets/images/home/ic_features_signatures.svg?inline'
import Forms from '~/assets/images/home/ic_features_forms.svg?inline'
import Document from '~/assets/images/home/ic_features_pageedit.svg?inline'
import Edit from '~/assets/images/home/ic_features_edit.svg?inline'
import Security from '~/assets/images/home/ic_features_security.svg?inline'
import Arrow from '~/assets/images/home/arrow.svg?inline'
import LineArrow from '~/assets/images/home/line_arrow.svg?inline'
import Platform from '~/assets/images/home/platforms.svg?inline'
import Dots from '~/assets/images/home/dot.svg?inline'
import Api from '~/assets/images/home/ic_features_api.svg?inline'
import Integrate from '~/assets/images/home/ic_features_integrate.svg?inline'
import Developer from '~/assets/images/home/ic_features_developer.svg?inline'
import Customizable from '~/assets/images/home/ic_features_customizable.svg?inline'
import Dot from '~/assets/images/home/comment_dot.svg?inline'
import Signflow from '~/assets/images/home/signflow.svg?inline'
import SignIcon from '~/assets/images/home/sign_icon.svg?inline'
import AnnotationsIcon from '~/assets/images/home/annotations_icon.svg?inline'
import ConversionIcon from '~/assets/images/home/conversion_icon.svg?inline'
import SdkIcon from '~/assets/images/home/sdk_icon.svg?inline'
import ChooseProduct from '../components/ChooseProduct.vue'

export default {
  components: {
    Viewing,
    Annotations,
    Signatures,
    Forms,
    Document,
    Edit,
    Security,
    Arrow,
    LineArrow,
    Platform,
    Dots,
    Signflow,
    Api,
    SignIcon,
    AnnotationsIcon,
    ConversionIcon,
    SdkIcon,
    Integrate,
    Developer,
    Customizable,
    Dot
  },
  head() {
    return {
      title: this.$config.meta['home-title'],
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$config.meta['home-desc']
        },
        {
          hid: 'og:title',
          property: 'og:title',
          content: this.$config.meta['home-title']
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.$config.meta['home-desc']
        },
        {
          hid: 'twitter:title',
          property: 'twitter:title',
          content: this.$config.meta['home-title']
        },
        {
          hid: 'twitter:description',
          property: 'twitter:description',
          content: this.$config.meta['home-desc']
        }
      ],
      link: [{
        hid: 'canonical',
        rel: 'canonical',
        href: process.env.domain
      }]
    }
  },
  data () {
    return {
      scrollTop: false,
      platform: 'iOS',
      language: 'Objective-C',
      languageIndex: 0,
      devices: ['iOS', 'Android', 'Windows', 'Mac', 'Web', 'Linux'],
      code: {
        iOS: {
          'Objective-C': `<span class="statement">#import</span> <span class="string">&lt;ComPDFKit/ComPDFKit.h&gt;</span>
- (<span class="keyword">void</span>)<span class="title">viewDidLoad</span> {
  [<span class="keyword">super</span> viewDidLoad];
  <span class="comment">// Get the path of a PDF</span>
  <span class="title">NSString</span> *<span class="title">pdfPath</span> = <span class="string">@"..."</span>;
  <span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>
  <span class="title">NSURL</span> *<span class="title">url</span> = [NSURL fileURLWithPath:pdfPath];
  <span class="title">CPDFDocument</span> *<span class="title">document</span> = [[[CPDFDocument alloc] initWithURL:url] autorelease];
  <span class="keyword">if</span> (document.error && document.error.code != CPDFDocumentPasswordError) {
    <span class="keyword">return</span>;
  }
  <span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>
  <span class="title">CPDFView</span> *<span class="title">pdfView</span> = [[[CPDFView alloc] initWithFrame:<span class="keyword">self</span>.view.bounds] autorelease];
  <span class="comment">// Set the document to display</span>
  <span class="title">pdfView</span>.<span class="title">document</span> = document;
  
  <span class="comment">// Add the pdfView to the root view</span>
  [<span class="keyword">self</span>.view addSubview:pdfView];
}`,
          Swift: `<span class="keyword">override</span> <span class="title">func viewDidLoad</span>() {
  <span class="keyword">super</span>.viewDidLoad()
  
  <span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>
  let document: CPDFDocument? = CPDFDocument.init(url: filePath)
  <span class="keyword">if</span> ((document?.error != <span class="keyword">nil</span>) && document?.error?._code != CPDFDocumentPasswordError) {
    <span class="keyword">return</span>
  }
  
  <span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>
  let pdfView: CPDFView? = CPDFView.init(frame: <span class="keyword">self</span>.view.bounds)
  pdfView?.document = document
  
  <span class="comment">// Add the pdfView to the root view</span>
  <span class="keyword">self</span>.view.addSubview(pdfView!)
}`
        },
        Android: {
          Java: `<span class="title">CPDFReaderView readerView</span>;
<span class="comment">// Get CPDFReaderView from xml</span>
<span class="title">readerView</span> = findViewById(R.<span class="keyword">id</span>.readerview);
<span class="title">CPDFDocument document</span> = <span class="keyword">new</span> CPDFDocument(context);
<span class="comment">//Open document.</span>
<span class="title">CPDFDocument</span>.<span class="title">PDFDocumentError error</span> = document.open(pdfUri);
<span class="keyword">if</span> (error == CPDFDocument.PDFDocumentError.PDFDocumentErrorPassword) {
  <span class="comment">//The document is encrypted and requires a password to open.</span>
  <span class="title">error</span> = document.open(pdfUri, <span class="string">"password"</span>);
}
<span class="keyword">if</span> (error == CPDFDocument.PDFDocumentError.PDFDocumentErrorSuccess) {
  <span class="comment">//The document is opened successfully and data can be parsed and manipulated.</span>
} <span class="keyword">else</span> {
  <span class="comment">//The PDF file failed to open. You can refer to the API file for specific error messages.</span>
}
<span class="comment">// Set the PDF document type to CPDFReaderView</span>
<span class="title">readerView</span>.<span class="title">setPDFDocument</span>(document);`,
          Kotlin: `<span class="comment">// Get CPDFReaderView from xml</span>
<span class="title">val readerView</span> = findViewById(R.<span class="keyword">id</span>.readerview)
val  document = CPDFDocument(context)
<span class="comment">//Open document.</span>
val error = document.open(pdfUri)
when (error) {
  CPDFDocument.PDFDocumentError.PDFDocumentErrorPassword -> {
    <span class="comment">//The document is encrypted and requires a password to open.</span>
    document.open(pdfUri, <span class="string">"password"</span>)
  }
  CPDFDocument.PDFDocumentError.PDFDocumentErrorSuccess -> {
    <span class="comment">//The document is opened successfully and data can be parsed and manipulated.</span>
  }
  <span class="keyword">else</span> -> {
    <span class="comment">//The PDF file failed to open. You can refer to the API file for specific error messages.</span>
  }
}
<span class="comment">// Set the PDF document type to CPDFReaderView</span>
readerView.setPDFDocument(document)`
        },
        Windows: {
          'C# WPF': `<span class="keyword">private void</span> OpenFile_Click(object sender, RoutedEventArgs e)
{
  var dlg = <span class="keyword">new</span> OpenFileDialog();
  dlg.Filter = <span class="string">"PDF Files (*.pdf)|*.pdf"</span>;
  
  <span class="keyword">if</span> (dlg.ShowDialog() == <span class="keyword">true</span>)
  {
    <span class="comment">//Initialize CPdfViewer.</span>
    CPdfViewer pdfViewer = <span class="keyword">new</span> CPdfViewer();
    
    <span class="comment">//Open the document through the document path.</span>
    pdfViewer.InitDocument(dlg.FileName);
    
    <span class="keyword">if</span> (pdfViewer.Document != null)
    {
      pdfViewer.Load();
    }
  }
}`,
          'C# UWP': `<span class="keyword">private</span> async <span class="keyword">void</span> OpenFile_Click(object sender, RoutedEventArgs e)
{
  FileOpenPicker filePicker = <span class="keyword">new</span> FileOpenPicker();
  filePicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
  filePicker.ViewMode = PickerViewMode.List;
  filePicker.FileTypeFilter.Add(<span class="string">".pdf"</span>);
  StorageFile pdfFile = await filePicker.PickSingleFileAsync();
  <span class="keyword">if</span> (pdfFile == null)
      <span class="keyword">return</span>;

  StorageFile docSource = CreateDocSource(pdfFile);
  CPDFViewer pdfViewer = <span class="keyword">new</span> CPDFViewer();
  pdfViewer.OpenFile(docSource.Path);
}`
        },
        Mac: {
          'Objective-C': `<span class="statement">#import</span> <span class="string">&lt;ComPDFKit/ComPDFKit.h&gt;</span>
- (<span class="keyword">void</span>)<span class="title">viewDidLoad</span> {
  [<span class="keyword">super</span> viewDidLoad];
  <span class="comment">// Get the path of a PDF</span>
  <span class="title">NSString</span> *<span class="title">pdfPath</span> = <span class="string">@"..."</span>;
  <span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>
  <span class="title">NSURL</span> *<span class="title">url</span> = [NSURL fileURLWithPath:pdfPath];
  <span class="title">CPDFDocument</span> *<span class="title">document</span> = [[[CPDFDocument alloc] initWithURL:url] autorelease];
  <span class="keyword">if</span> (document.error && document.error.code != CPDFDocumentPasswordError) {
    <span class="keyword">return</span>;
  }
  <span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>
  <span class="title">CPDFView</span> *<span class="title">pdfView</span> = [[[CPDFView alloc] initWithFrame:<span class="keyword">self</span>.view.bounds] autorelease];
  <span class="comment">// Set the document to display</span>
  <span class="title">pdfView</span>.<span class="title">document</span> = document;
  
  <span class="comment">// Add the pdfView to the root view</span>
  [<span class="keyword">self</span>.view addSubview:pdfView];
}`,
          Swift: `<span class="keyword">override</span> <span class="title">func viewDidLoad</span>() {
  <span class="keyword">super</span>.viewDidLoad()
  
  <span class="comment">// Initialize a CPDFDocument object with the path to the PDF file</span>
  let document: CPDFDocument? = CPDFDocument.init(url: filePath)
  <span class="keyword">if</span> ((document?.error != <span class="keyword">nil</span>) && document?.error?._code != CPDFDocumentPasswordError) {
    <span class="keyword">return</span>
  }
  
  <span class="comment">// Initialize a CPDFView object with the size of the entire screen</span>
  let pdfView: CPDFView? = CPDFView.init(frame: <span class="keyword">self</span>.view.bounds)
  pdfView?.document = document
  
  <span class="comment">// Add the pdfView to the root view</span>
  <span class="keyword">self</span>.view.addSubview(pdfView!)
}`
        },
        Web: {
          JavaScript: `<span class="keyword">const</span> setPdfView= async () => {
  <span class="comment">// Get PDFDocument object with the path to the PDF file</span>
  <span class="keyword">const</span> pdfFile = await loadPdf({
    url: <span class="string">'document.pdf'</span>
  });
  <span class="comment">// Initialize PdfViewer</span>
  setPdfDocument(pdfFile);
};
<span class="title">setPdfView</span>();`
        },
        Linux: {
          CMD: `<span class="statement">#!/bin/sh</span>
<span class="string">echo</span> <span class="keyword">"Example 1) Convert myIn.pdf in this folder to myOut.docx using default options:"</span>
./comPdf convert docx -i myIn.pdf -o myOut.docx --license COMPDF_LICENSE_KEY

<span class="string">echo</span> <span class="keyword">"Example 2) merge main.pdf and myIn1.pdf in this folder to merged.pdf using default options:"</span>
./comPdf merge --doc=myIn1.pdf  -i main.pdf -o merged.pdf --license COMPDF_LICENSE_KEY`
        }
      },
      comment: [
        {
          text: `Considered that our users want to take some notes when they are reading and studying. I was trying to process PDFs and to recreate all the functionality, but what I needed to provide is a solution to a business problem at my work, not write a PDF-processing piece of software. With the help of ComPDFKit, we needn't waste much time on development process.`,
          name: 'Gordon Hall',
          job: 'Operations Director, Information Technology'
        },
        {
          text: `We were in search of the best PDF column, and have chosen ComPDFKit to help us integrate PDF files viewing, converting, and annotating capabilities. I must say it's the best choice.`,
          name: 'Theodore Evans',
          job: 'Manager of Marketing Department, Education'
        },
        {
          text: 'Thanks to ComPDFKit a lot. This time, our company want to offer customers a simple, fast, and secure way to sign and fill PDF forms, they could always meet the needs of our company. That is why PDF Technologies has been our partner for many years.',
          name: 'Ronald W. Reagan',
          job: 'Product Manager, Modern service industry'
        }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll)
    this.onScroll()
    window.addEventListener('mousemove', this.handleMouseMove)
    const scene = document.querySelector('.js-images-scene');
    if (scene) {
      // eslint-disable-next-line no-new
      new Parallax(scene, {});
    }
  },
  methods: {
    onScroll () {
      this.scrollTop = window.scrollY > 0
    }
  },
}
</script>

<template>
  <div class="bg-[#F4F8FF]">
    <Header :class="scrollTop && 'border-b-1px border-b-[#CDDFFF]'" />
    <div class="top-banner bg-[#F4F8FF] overflow-hidden lg:h-618px lg:mt-80px <lg:mt-66px">
      <div class="banner container h-full lg:flex lg:justify-between lg:items-center <lg:py-40px <lg:text-center">
        <div class="text-container lg:w-[44.2373%] lg:mb-12px">
          <h1 class="text-brand-0 lg:text-40px lg:leading-46px lg:pb-2px <lg:pb-8px <lg:text-30px <lg:leading-32px font-bold">ComPDFKit</h1>
          <h1 class="text-brand-0 lg:text-40px lg:leading-46px <lg:text-30px <lg:leading-32px font-bold">专业的PDF文档处理SDK</h1>
          <TextParagraph class="lg:text-20px lg:leading-32px lg:mt-12px lg:mb-60px <lg:my-24px <lg:text-14px <lg:leading-20px">ComPDFKit提供专业、全平台支持的PDF开发库，包括Windows、Mac、Linux、 Android、iOS、Web平台。开发者可以快速、灵活整合PDF功能到各开发平台的软件、程序、系统中。丰富的功能，多种开发语言，灵活的部署方案可供选择，满足您对PDF文档的所有需求。</TextParagraph>
          <div class="flex <lg:flex-col <lg:items-center">
            <LinkButton type="plain" bold class="dynamic lg:max-w-200px bg-brand-0 text-white text-sm <lg:max-w-260px <lg:h-48px <lg:mb-16px" href="/contact-sales">立刻试用</LinkButton>
            <nuxt-link class="lg:max-w-200px w-[100%] rounded-6px border-1px text-[#1460F3] border-[#1460F3] flex justify-center items-center font-bold lg:ml-12px lg:hover:bg-brand-0 lg:hover:text-white <lg:max-w-260px <lg:active:bg-brand-0 <lg:active:text-white <lg:h-48px" to="/">联系我们</nuxt-link>
          </div>
        </div>
        <div class="img-container relative flex items-center md:h-452px md:w-714px <lg:mt-30px <lg:mx-auto">
          <picture class="swiper-img md:absolute w-full">
            <source type="image/png" media="(min-width: 768px)" srcset="/images/home/pdf_sdk_banner@2x.png">
            <source type="image/png" media="(max-width: 767px)" srcset="/images/home/pdf_sdk_banner.png">
            <img src="/images/home/pdf_sdk_banner@2x.png" alt="PDF Reader Pro for Windows">
          </picture>
        </div>
      </div>
    </div>
    <div class="bg-white">
      <div class="lg:py-80px <lg:py-40px">
        <h3 class="lg:mb-70px text-xl text-brand-1 font-bold text-center <lg:text-20px <lg:leading-24px <lg:mb-24px">选择您需要的产品&功能</h3>
        <ChooseProduct />
        <LinkButton type="plain" bold class="dynamic max-w-200px mx-auto mt-60px bg-brand-0 text-white text-sm <lg:max-h-54px <lg:mt-24px" href="/contact-sales">免费试用获取报价</LinkButton>
      </div>
    </div>
    <div class="lg:my-80px <lg:mt-40px">
      <h3 class="lg:mb-70px text-xl text-brand-1 font-bold text-center <lg:text-20px <lg:leading-24px">ComPDFKit产品优势</h3>
      <div class="container flex justify-between <lg:text-center <lg:hidden">
        <HomeBlock>
          <img class="<lg:mx-auto" src="/images/home/mature_technology.png" alt="成熟的研发技术">
          <template slot="title">成熟的研发技术</template>
          <template slot="desc">拥有多年的技术积累，建立了完善的产品研发和迭代机制，为产品竞争力提供坚实保障。</template>
        </HomeBlock>
        <HomeBlock>
          <img class="<lg:mx-auto" src="/images/home/full_pdf_transform.png" alt="全面的PDF和格式转换功能">
          <template slot="title">全面的PDF和格式转换功能</template>
          <template slot="desc">支持全面的PDF和转换功能，满足多样化需求，简单易用，企业替换、迁移无培训成本。</template>
        </HomeBlock>
        <HomeBlock>
          <img class="<lg:mx-auto" src="/images/home/service_aftermarket.png" alt="优质的服务和售后保障体系">
          <template slot="title">优质的服务和售后保障体系</template>
          <template slot="desc">提供7*24小时的专业服务保障及技术支持，多种方式快速响应用户反馈, 解答疑问。</template>
        </HomeBlock>
        <HomeBlock>
          <img class="<lg:mx-auto" src="/images/home/intellectual_property.png" alt="Future-oriented">
          <template slot="title">自主知识产权</template>
          <template slot="desc">技术独立自主，符合国际标准， 帮助企业对接国际业务的同时，无需考虑版权风险。</template>
        </HomeBlock>
      </div>
      <div class="lg:hidden">
        <PdfSdkCommentSwiper :comment="comment"/>
      </div>
      <LinkButton type="plain" bold class="dynamic max-w-200px mx-auto mt-60px bg-brand-0 text-white text-sm <lg:mt-0 <lg:mb-40px" href="/contact-sales">免费试用</LinkButton>
    </div>
    <CooperationCase />
    <div class="lg:pt-52px lg:pb-90px <lg:py-40px">
      <div class="container text-center">
        <h3 class="text-xl text-brand-1 font-bold <lg:text-20px <lg:leading-24px">ComPDFKit 功能展示代码样例</h3>
        <TextParagraph class="max-w-970px mx-auto lg:mt-16px lg:mb-60px <lg:text-12px <lg:leading-16px <lg:mt-16px <lg:mb-24px">值得开发者信赖的全功能PDF API，随市场对PDF SDK需求的改变，不断调整我们的SDK产品，提供高性能的PDF开发库，缩短您项目的开发周期。</TextParagraph>
        <CodePreviewIndex :platform="platform" :devices="devices" :language="language" :languageIndex="languageIndex" :code="code" />
      </div>
    </div>
    <div class="pdfpro">
      <div class="pdfpro-container lg:pt-94px lg:pb-74px <lg:py-30px <md:px-20px">
        <div class="pdfpro-content mx-auto 2xl:w-1280px lg:py-47px lg:w-930px @md:w-700px <lg:py-24px <lg:px-16px <lg:text-center <md:w-full <md:max-w-520px">
          <div class="lg:flex lg:pl-[7.0313%] lg:pr-[2.3438%] @lg:items-center @xl:items-center">
            <div class="lg:w-[39.3103%]">
              <img class="w-60px <lg:mx-auto" src="/images/home/pdfpro_logo.png" alt="pdfpro logo">
              <h3 class="mb-8px text-brand-1 font-bold lg:mt-12px lg:text-xl <lg:mt-8px <lg:text-base">PDF Reader Pro</h3>
              <div class="text-brand-1 text-18px leading-24px font-bold">由ComPDFKit提供技术支持</div>
              <div class="mt-16px text-tiny text-[#6A6F77] <lg:text-12px <lg:leading-16px">PDF Reader Pro是由ComPDFKit提供技术支持的、一站式的PDF编辑器。快速集成ComPDFKit丰富的PDF功能，加速PDF Reader Pro产品投入市场并获得了广大用户的认可。</div>
              <LinkButton type="plain" bold class="dynamic max-w-200px mt-24px bg-brand-0 text-white text-sm <lg:mx-auto" :href="$config.pdfproHost" target="_blank">点击了解更多</LinkButton>
            </div>
            <div class="img-container lg:w-[61.8163%] 2xl:mb-[-55px] <lg:mt-15px">
              <picture>
                <source type="image/png" media="(min-width: 930px)" srcset="/images/home/reader_image@2x.png">
                <source type="image/png" media="(max-width: 929px)" srcset="/images/home/reader_image.png">
                <img class="<lg:mx-auto <lg:w-full <lg:max-w-648px" src="/images/home/reader_image.png" alt="PDF Reader Pro Picture">
              </picture>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PdfSdkGetProduct />
    <Service />
    <Footer />
  </div>
</template>

<style lang="scss" scoped>
  .top-banner {
    background: url('/images/home/bg_top@2x.jpg') center/cover no-repeat;
  }
  .comment {
    .comment-item {
      box-shadow: 0px 13px 46px #AFCBFF, inset 1.5px -1.5px 1.5px rgba(214, 214, 214, 0.4), inset -1.5px 1.5px 1.5px rgba(255, 255, 255, 0.4);
    }
  }
  .all-platforms {
    background: url('/images/home/platforms_background@2x.jpg') center/cover no-repeat;
  }
  .pdfpro {
    background: linear-gradient(264.73deg, #377BFF -1.36%, #FFFFFF 107.27%);
  }
  @media screen and (max-width: 929px) {
    .top-banner {
      background-image: url('/images/home/bg_top.jpg');
    }
    .pdfpro-content {
      background: linear-gradient(186.94deg, rgba(255, 255, 255, 0.76) 24.77%, rgba(255, 255, 255, 0.48) 71.79%, rgba(255, 255, 255, 0) 86.64%);
      backdrop-filter: blur(1.47626px);
      border-radius: 11px;
    }
  }
  @media screen and (max-width: 767px) {
    .all-platforms {
      background-image: url('/images/home/platforms_background.jpg');
    }
  }
  @media screen and (min-width: 930px) {
    .card {
      transition: all .2s ease;
      svg {
        transition: all .2s ease;
      }
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0px 10px 20px rgba(6, 80, 222, 0.25);
        svg {
          transform: translateX(8px);
        }
      }
    }
    .card-conversion {
      &:hover {
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
      }
    }
    .review-card {
      background: #EEF7FF url('/images/home/customer.png') right bottom/100% auto no-repeat;
    }
    .pdfpro-container {
      background: linear-gradient(264.73deg, #377BFF -1.36%, #FFFFFF 107.27%);
    }
    .pdfpro-content {
      background: linear-gradient(89.1deg, rgba(255, 255, 255, 0.76) 25%, rgba(255, 255, 255, 0.48) 67.84%, rgba(255, 255, 255, 0) 81.37%);
      backdrop-filter: blur(5.5px);
      border-radius: 16px;
      transform: translateX(-50px);
    }
  }
  @media screen and (min-width: 1280px) {
    .pdfpro .img-container {
      transform: translateY(25px);
    }
  }
</style>