webviewer.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. const ComPDFKitViewer = {
  2. init (options, element) {
  3. return new Promise((resolve) => {
  4. element.addEventListener("ready", function ready () {
  5. element.removeEventListener('ready', ready)
  6. const iframeWindow = element.querySelector('iframe').contentWindow
  7. Promise.resolve().then(function() {
  8. resolve({
  9. docViewer: iframeWindow.instance,
  10. Core: iframeWindow.instances.Core,
  11. UI: iframeWindow.instances.UI
  12. })
  13. })
  14. })
  15. const viewer = new Viewer(options, element)
  16. })
  17. }
  18. }
  19. const docViewer = new Map()
  20. class Viewer {
  21. static config = {
  22. path: '',
  23. webviewerPath: './webviewer/index.html',
  24. }
  25. constructor (options, element) {
  26. if (docViewer.get(element)) return
  27. docViewer.set(element, true)
  28. this.instance = null
  29. this.options = options
  30. this.initialDoc = options.pdfUrl || null
  31. this.element = element
  32. this.options.path = this.options.path || Viewer.config.path
  33. const length = this.options.path.length - 1
  34. length > 0 && "/" !== this.options.path[length] && (this.options.path += "/")
  35. this.options.webviewerPath = this.options.path + Viewer.config.webviewerPath
  36. element.addEventListener("ready", (function ready() {
  37. element.removeEventListener("ready", ready)
  38. }))
  39. this.create()
  40. }
  41. _createEvent (e, t) {
  42. let n;
  43. try {
  44. n = new CustomEvent(e, {
  45. detail: t,
  46. bubbles: true,
  47. cancelable: true
  48. })
  49. } catch (o) {
  50. (n = document.createEvent("Event")).initEvent(e, true, true),
  51. n.detail = t
  52. }
  53. return n
  54. }
  55. create() {
  56. if (this.initialDoc) {
  57. this.initialDoc = encodeURIComponent(JSON.stringify(this.initialDoc))
  58. this._create()
  59. } else {
  60. this._create()
  61. }
  62. }
  63. _create () {
  64. if (!this._trigger) {
  65. this._trigger = function(e, t) {
  66. var n = this._createEvent(e, t);
  67. this.element.dispatchEvent(n)
  68. }
  69. }
  70. this.createViewer()
  71. }
  72. createViewer () {
  73. const self = this
  74. let webviewerUrl = this.options.webviewerPath
  75. if (this.initialDoc) {
  76. webviewerUrl += "#d=".concat(this.initialDoc)
  77. } else {
  78. webviewerUrl += '#'
  79. }
  80. this.options.showToolbarControl !== undefined && (webviewerUrl += "&header=".concat(this.options.showToolbarControl ? "true": "false"))
  81. const iframe = document.createElement("iframe")
  82. iframe.id = "webviewer"
  83. iframe.src = webviewerUrl
  84. iframe.title = "webviewer"
  85. iframe.frameBorder = 0
  86. iframe.width = "100%"
  87. iframe.height = "100%"
  88. iframe.setAttribute("allowfullscreen", true)
  89. iframe.setAttribute("webkitallowfullscreen", true)
  90. iframe.setAttribute("mozallowfullscreen", true)
  91. this.iframe = iframe
  92. this.options?.backgroundColor && iframe.setAttribute("data-bgcolor", this.options.backgroundColor),
  93. this.options?.assetPath && iframe.setAttribute("data-assetpath", encodeURIComponent(this.options.assetPath)),
  94. this.loadListener = async function() {
  95. var $iframe = self.iframe;
  96. self.instance = $iframe.contentWindow.instance;
  97. await self.instance.initOptions(self.options)
  98. self._trigger("ready");
  99. },
  100. iframe.addEventListener("load", this.loadListener),
  101. this.element.appendChild(iframe)
  102. }
  103. }
  104. export default ComPDFKitViewer