-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
330 additions
and
59 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import content from './api.md?raw' | ||
| import { tag, Component } from 'omi' | ||
| import '../../common/markdown-renderer' | ||
|
|
||
| @tag('pdf-api') | ||
| export class API extends Component { | ||
| render() { | ||
| return <markdown-renderer content={content}></markdown-renderer> | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import '@/site/code-showcase' | ||
|
|
||
| import { tag, Component } from 'omi' | ||
| import { tailwind } from '@/tailwind' | ||
|
|
||
| import './pdf' | ||
|
|
||
| @tag('pdf-page') | ||
| export class ButtonPage extends Component { | ||
| static css = [ | ||
| tailwind, | ||
| ` | ||
| o-button{ margin: 0.2em; } | ||
| code-showcase{ margin-bottom: 2em; } | ||
| `, | ||
| ] | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="container my-12 !max-w-full mb-48"> | ||
| {/* <!-- Section: Basic example --> */} | ||
| <section> | ||
| {/* <!-- Title --> */} | ||
| <h2 className="mb-5 mt-0 text-3xl font-semibold leading-normal" id="basic_example" data-te-spy-item> | ||
| Basic example | ||
| </h2> | ||
| {/* <!-- Description --> */} | ||
| <p className="mb-3"> | ||
| A general-purpose, web standards-based platform for parsing and rendering PDFs. Download Demo GitHub | ||
| Project. | ||
| </p> | ||
|
|
||
| <code-showcase code={`<o-pdf | ||
| scale={1.5} | ||
| url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"> | ||
| </o-pdf>`}> | ||
| <o-pdf | ||
| scale={1.5} | ||
| url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"> | ||
| </o-pdf> | ||
| </code-showcase> | ||
| </section> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| ## PDF Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ----- | ------------------------------------------------------------------------------- | ------- | --------------------- | | ||
| | scale | Number (float) | 1.0 | The scaling factor used to adjust the size of the PDF page. A larger value results in a larger PDF page. | | ||
| | url | String (URL) | N/A | The source URL of the PDF file, used to specify the PDF file to be displayed and manipulated. | | ||
|
|
||
|
|
||
| ## PDF 属性 | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ----- | ------------------------------------------------------------------------------- | ------- | ------------ | | ||
| | scale | 数字 (浮点数) | 1.0 | 用于调整PDF页面大小的缩放比例。数值越大，PDF页面越大。 | | ||
| | url | 字符串 (URL) | N/A | 指定要显示和操作的PDF文件的来源URL。 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import { tag, Component, classNames, bind } from 'omi' | ||
| import { tailwind } from '@/tailwind' | ||
| import '../../components/button/button' | ||
| import pdfjs from '@bundled-es-modules/pdfjs-dist/build/pdf' | ||
| import viewer from '@bundled-es-modules/pdfjs-dist/web/pdf_viewer' | ||
|
|
||
| pdfjs.GlobalWorkerOptions.workerSrc = 'https://omi.cdn-go.cn/omiu/latest/pdf.worker.js' | ||
|
|
||
| @tag('o-pdf') | ||
| export class Button extends Component { | ||
| static css = [ | ||
| tailwind, | ||
| `:host { | ||
| display: block; | ||
| } | ||
| `, | ||
| ] | ||
|
|
||
| state = { | ||
| pageNum: '-', | ||
| pageCount: '-', | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| scale: 1 | ||
| } | ||
|
|
||
| installed() { | ||
| // header on that server. | ||
| const url = this.props.url | ||
|
|
||
| this.pdfDoc = null | ||
| this.pageNum = 1 | ||
| this.pageRendering = false | ||
| this.pageNumPending = null | ||
| this.scale = this.props.scale | ||
| this.ctx = this.canvas.getContext('2d') | ||
|
|
||
| /** | ||
| * Asynchronously downloads PDF. | ||
| */ | ||
| pdfjs.getDocument(url).promise.then((pdfDoc_) => { | ||
| this.pdfDoc = pdfDoc_ | ||
|
|
||
| this.state.pageCount = this.pdfDoc.numPages | ||
| this.update() | ||
|
|
||
| // Initial/first page rendering | ||
| this.renderPage(this.pageNum) | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * Get page info from document, resize canvas accordingly, and render page. | ||
| * @param num Page number. | ||
| */ | ||
| renderPage(num) { | ||
| this.pageRendering = true | ||
| // Using promise to fetch the page | ||
| this.pdfDoc.getPage(num).then((page) => { | ||
| const viewport = page.getViewport({ scale: this.scale }) | ||
| this.canvas.height = viewport.height | ||
| this.canvas.width = viewport.width | ||
|
|
||
| // Render PDF page into canvas context | ||
| const renderContext = { | ||
| canvasContext: this.ctx, | ||
| viewport: viewport, | ||
| } | ||
| const renderTask = page.render(renderContext) | ||
|
|
||
| // Wait for rendering to finish | ||
| renderTask.promise.then(() => { | ||
| this.pageRendering = false | ||
| if (this.pageNumPending !== null) { | ||
| // New page rendering is pending | ||
| this.renderPage(this.pageNumPending) | ||
| this.pageNumPending = null | ||
| } | ||
| }) | ||
| }) | ||
|
|
||
| this.state.pageNum = num | ||
| this.update() | ||
| } | ||
|
|
||
| queueRenderPage(num) { | ||
| if (this.pageRendering) { | ||
| this.pageNumPending = num | ||
| } else { | ||
| this.renderPage(num) | ||
| } | ||
| } | ||
|
|
||
| @bind | ||
| onPrevClick() { | ||
| if (this.pageNum <= 1) { | ||
| return | ||
| } | ||
| this.pageNum-- | ||
| this.queueRenderPage(this.pageNum) | ||
| } | ||
|
|
||
| @bind | ||
| onNextClick() { | ||
| if (this.pageNum >= this.pdfDoc.numPages) { | ||
| return | ||
| } | ||
| this.pageNum++ | ||
| this.queueRenderPage(this.pageNum) | ||
| } | ||
|
|
||
| render(props) { | ||
| return ( | ||
| <> | ||
| <div class="flex justify-between items-center"> | ||
| <o-button variant="outlined" onClick={this.onPrevClick} class>Prev</o-button> | ||
| <span> | ||
| <span id="page_num">{this.state.pageNum}</span> / <span id="page_count">{this.state.pageCount}</span> | ||
| </span> | ||
| <o-button variant="outlined" onClick={this.onNextClick}>Next</o-button> | ||
| </div> | ||
|
|
||
| <canvas ref={(e) => (this.canvas = e)}></canvas> | ||
| </> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,37 @@ | ||
| ## Tabs Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | -------- | ------- | ------- | ------------------------------------------------------------ | | ||
| | fill | boolean | false | Whether the tabs should be filled or not. | | ||
| | justify | boolean | false | Whether the tabs should be justified or not. | | ||
| | vertical | boolean | false | Whether the tabs should be displayed vertically or not. | | ||
| | pills | boolean | false | Whether the tabs should be displayed as pills or not. | | ||
| | Name | Type | Default | Description | | ||
| | -------- | ------- | ------- | ------------------------------------------------------- | | ||
| | fill | boolean | false | Whether the tabs should be filled or not. | | ||
| | justify | boolean | false | Whether the tabs should be justified or not. | | ||
| | vertical | boolean | false | Whether the tabs should be displayed vertically or not. | | ||
| | pills | boolean | false | Whether the tabs should be displayed as pills or not. | | ||
|
|
||
| ## Tabs Item Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ------------ | ------- | --------- | ------------------------------------------------------------ | | ||
| | disabled | boolean | false | Whether the tab item should be disabled or not. | | ||
| | active | boolean | false | Whether the tab item should be active or not. | | ||
| | color | string | 'primary' | The color of the tab item. | | ||
| | Name | Type | Default | Description | | ||
| | ------------ | ------- | --------- | --------------------------------------------------------------- | | ||
| | disabled | boolean | false | Whether the tab item should be disabled or not. | | ||
| | active | boolean | false | Whether the tab item should be active or not. | | ||
| | color | string | 'primary' | The color of the tab item. | | ||
| | wrapperClass | string | | The class to be applied to the wrapper element of the tab item. | | ||
| | tag | string | 'a' | The HTML tag to be used for the tab item. | | ||
| | tag | string | 'a' | The HTML tag to be used for the tab item. | | ||
|
|
||
| ## Tabs属性 | ||
|
|
||
| | 名称 | 类型 | 默认值 | 说明 | | ||
| | -------- | ------- | -------- | ------------------------------------------------------------ | | ||
| | fill | boolean | false | 标签页是否填充。 | | ||
| | justify | boolean | false | 标签页是否两端对齐。 | | ||
| | vertical | boolean | false | 标签页是否垂直显示。 | | ||
| | pills | boolean | false | 标签页是否以胶囊形式显示。 | | ||
| | 名称 | 类型 | 默认值 | 说明 | | ||
| | -------- | ------- | ------ | -------------------------- | | ||
| | fill | boolean | false | 标签页是否填充。 | | ||
| | justify | boolean | false | 标签页是否两端对齐。 | | ||
| | vertical | boolean | false | 标签页是否垂直显示。 | | ||
| | pills | boolean | false | 标签页是否以胶囊形式显示。 | | ||
|
|
||
| ## Tabs Item属性 | ||
|
|
||
| | 名称 | 类型 | 默认值 | 说明 | | ||
| | ------------ | ------- | -------- | ------------------------------------------------------------ | | ||
| | disabled | boolean | false | 标签项是否禁用。 | | ||
| | active | boolean | false | 标签项是否激活。 | | ||
| | color | string | 'primary' | 标签项的颜色。 | | ||
| | wrapperClass | string | | 应用于标签项包装元素的类。 | | ||
| | tag | string | 'a' | 用于标签项的HTML标签。 | | ||
| | 名称 | 类型 | 默认值 | 说明 | | ||
| | ------------ | ------- | --------- | -------------------------- | | ||
| | disabled | boolean | false | 标签项是否禁用。 | | ||
| | active | boolean | false | 标签项是否激活。 | | ||
| | color | string | 'primary' | 标签项的颜色。 | | ||
| | wrapperClass | string | | 应用于标签项包装元素的类。 | | ||
| | tag | string | 'a' | 用于标签项的HTML标签。 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.