{"id":7184,"date":"2025-11-25T10:54:00","date_gmt":"2025-11-25T02:54:00","guid":{"rendered":"https:\/\/support.fuxinsoft.cn\/?p=7184"},"modified":"2025-11-25T10:54:00","modified_gmt":"2025-11-25T02:54:00","slug":"pdf-web-sdk-%e7%bc%93%e5%ad%98%e6%95%b0%e6%8d%ae%e6%8c%81%e4%b9%85%e5%8c%96%e5%ad%98%e5%82%a8","status":"publish","type":"post","link":"https:\/\/support.fuxinsoft.cn\/?p=7184","title":{"rendered":"PDF Web SDK \u7f13\u5b58\u6570\u636e\u6301\u4e45\u5316\u5b58\u50a8"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u4e00\u3001\u529f\u80fd\u8bf4\u660e<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\u5728\u4f7f\u7528 PDF Web SDK\uff08PDFViewCtrl\uff09\u5f00\u53d1\u65f6\uff0c\u82e5\u9700\u8bb0\u5f55\u4e1a\u52a1\u6570\u636e\uff08\u5982\u7528\u6237\u914d\u7f6e\u3001\u5904\u7406\u8fdb\u5ea6\u3001\u81ea\u5b9a\u4e49\u6837\u5f0f\u7b49\uff09\uff0c\u5e76\u5e0c\u671b\u4e0b\u6b21\u6253\u5f00\u6d4f\u89c8\u5668\u65f6\u4ecd\u80fd\u83b7\u53d6\u8fd9\u4e9b\u6570\u636e\uff0c\u53ef\u901a\u8fc7 SDK \u5185\u7f6e\u7684 IndexedDBStorageDriver \u5b9e\u73b0\u6301\u4e45\u5316\u5b58\u50a8\u3002\u8be5\u5b58\u50a8\u57fa\u4e8e\u6d4f\u89c8\u5668 IndexedDB \u6280\u672f\uff0c\u6570\u636e\u5b58\u50a8\u5bb9\u91cf\u5927\u3001\u652f\u6301\u5f02\u6b65\u64cd\u4f5c\uff0c\u4e14\u5728\u6d4f\u89c8\u5668\u91cd\u542f\u540e\u4e0d\u4e22\u5931\uff08\u533a\u522b\u4e8e\u4e34\u65f6\u5b58\u50a8 sessionStorage\uff09\u3002<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001\u6838\u5fc3 API \u8bf4\u660e<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>API \u65b9\u6cd5<\/td><td>\u4f5c\u7528<\/td><td>\u53c2\u6570\u8bf4\u660e<\/td><\/tr><tr><td>storageDriver.get(context, key)<\/td><td>\u6839\u636e\u4e0a\u4e0b\u6587\u548c\u952e\u540d\u8bfb\u53d6\u7f13\u5b58\u6570\u636e<\/td><td><code>context<\/code>\uff1a\u5b58\u50a8\u4e0a\u4e0b\u6587\uff08\u7528\u4e8e\u5206\u7c7b\u6570\u636e\uff09\uff1b<code>key<\/code>\uff1a\u6570\u636e\u552f\u4e00\u6807\u8bc6<\/td><\/tr><tr><td>storageDriver.set(context, key, value)<\/td><td>\u6839\u636e\u4e0a\u4e0b\u6587\u548c\u952e\u540d\u5b58\u50a8\u6570\u636e<\/td><td><code>context<\/code>\uff1a\u5b58\u50a8\u4e0a\u4e0b\u6587\uff1b<code>key<\/code>\uff1a\u6570\u636e\u552f\u4e00\u6807\u8bc6\uff1b<code>value<\/code>\uff1a\u5f85\u5b58\u50a8\u7684\u5185\u5bb9\uff08\u652f\u6301\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u3001\u5bf9\u8c61\u7b49\u53ef\u5e8f\u5217\u5316\u7c7b\u578b\uff09<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001\u57fa\u7840\u7528\u6cd5\uff08\u5b58\u50a8 \/ \u8bfb\u53d6\u7b80\u5355\u6570\u636e\uff09<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u9700\u5728 async \u51fd\u6570\u4e2d\u6267\u884c\uff08\u5982 SDK \u521d\u59cb\u5316\u5b8c\u6210\u540e\u7684\u56de\u8c03\u51fd\u6570\uff09\nasync function handlePersistentStorage() {\n  try {\n    \/\/ 1. \u83b7\u53d6 IndexedDB \u5b58\u50a8\u9a71\u52a8\u5b9e\u4f8b\n    const { IndexedDBStorageDriver } = PDFViewCtrl.storage;\n    const storageDriver = pdfui.pdfViewer.getIoC().getInstanceByClass(IndexedDBStorageDriver);\n\n    \/\/ 2. \u5b9a\u4e49\u5b58\u50a8\u4e0a\u4e0b\u6587\uff08context\uff09\u548c\u952e\u540d\uff08key\uff09\n    \/\/ context\uff1a\u7528\u4e8e\u5206\u7c7b\u6570\u636e\uff0c\u5efa\u8bae\u5305\u542b\u4e1a\u52a1\u6807\u8bc6\uff08\u5982\u529f\u80fd\u6a21\u5757\u3001\u7528\u6237ID\uff09\uff0c\u907f\u514d\u4e0d\u540c\u4e1a\u52a1\u6570\u636e\u51b2\u7a81\n    const context = { \n      id: 'PDF_User_Config', \/\/ \u4e0a\u4e0b\u6587\u552f\u4e00\u6807\u8bc6\uff08\u53ef\u81ea\u5b9a\u4e49\uff0c\u5982\u7528\u6237ID\u3001\u529f\u80fdID\uff09\n      feature: 'Annotation_Style' \/\/ \u529f\u80fd\u6a21\u5757\uff08\u5982\u201c\u6279\u6ce8\u6837\u5f0f\u201d\u201c\u8868\u5355\u6570\u636e\u201d\uff09\n    };\n    \/\/ key\uff1a\u6570\u636e\u552f\u4e00\u952e\u540d\uff08\u540c\u4e00 context \u4e0b key \u4e0d\u53ef\u91cd\u590d\uff09\n    const storageKey = 'Default_Annotation_Color';\n\n    \/\/ 3. \u8bfb\u53d6\u5df2\u5b58\u50a8\u7684\u6570\u636e\uff08\u82e5\u5b58\u5728\uff09\n    const storedValue = await storageDriver.get(context, storageKey);\n    if (storedValue) {\n      console.log('\u8bfb\u53d6\u7f13\u5b58\u6210\u529f\uff1a', storedValue);\n      \/\/ \u4e1a\u52a1\u903b\u8f91\uff1a\u4f7f\u7528\u7f13\u5b58\u6570\u636e\uff08\u5982\u8bbe\u7f6e\u9ed8\u8ba4\u6279\u6ce8\u989c\u8272\uff09\n      \/\/ setAnnotationDefaultColor(storedValue);\n    } else {\n      console.log('\u65e0\u5bf9\u5e94\u7f13\u5b58\u6570\u636e\uff0c\u5c06\u5b58\u50a8\u65b0\u6570\u636e');\n    }\n\n    \/\/ 4. \u5b58\u50a8\u65b0\u6570\u636e\uff08\u652f\u6301\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u3001\u5bf9\u8c61\u7b49\u53ef\u5e8f\u5217\u5316\u7c7b\u578b\uff09\n    const newData = '#FF5733'; \/\/ \u5f85\u5b58\u50a8\u7684\u5185\u5bb9\uff08\u793a\u4f8b\uff1a\u6279\u6ce8\u9ed8\u8ba4\u989c\u8272\uff09\n    await storageDriver.set(context, storageKey, newData);\n    console.log('\u6570\u636e\u5b58\u50a8\u6210\u529f\uff1a', newData);\n\n  } catch (error) {\n    console.error('\u7f13\u5b58\u64cd\u4f5c\u5931\u8d25\uff1a', error);\n    \/\/ \u5f02\u5e38\u5904\u7406\uff1a\u5982\u63d0\u793a\u7528\u6237\u5b58\u50a8\u5931\u8d25\u3001\u4f7f\u7528\u9ed8\u8ba4\u503c\u66ff\u4ee3\n    \/\/ showErrorToast('\u6570\u636e\u7f13\u5b58\u5931\u8d25\uff0c\u8bf7\u5237\u65b0\u9875\u9762\u91cd\u8bd5');\n  }\n}\n\n\/\/ \u8c03\u7528\u51fd\u6570\uff08\u9700\u786e\u4fdd pdfui \u5df2\u521d\u59cb\u5316\uff09\n\/\/ \u793a\u4f8b\uff1a\u5728 SDK \u52a0\u8f7d\u5b8c\u6210\u540e\u7684\u56de\u8c03\u4e2d\u6267\u884c\npdfui.on('ready', handlePersistentStorage);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001\u5173\u952e\u6ce8\u610f\u4e8b\u9879<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4e0a\u4e0b\u6587\uff08context\uff09\u8bbe\u8ba1\u89c4\u8303<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li><code>context<\/code>&nbsp;\u7528\u4e8e\u6570\u636e\u5206\u7c7b\uff0c\u5efa\u8bae\u5305\u542b&nbsp;<code>id<\/code>\uff08\u5168\u5c40\u552f\u4e00\u6807\u8bc6\uff09\u548c&nbsp;<code>feature<\/code>\uff08\u529f\u80fd\u6a21\u5757\uff09\uff0c\u907f\u514d\u4e0d\u540c\u4e1a\u52a1\u6a21\u5757\u7684&nbsp;<code>key<\/code>&nbsp;\u51b2\u7a81\uff1b<\/li>\n\n\n\n<li>\u793a\u4f8b\uff1a\u7528\u6237 A \u7684\u6279\u6ce8\u6837\u5f0f\u4e0a\u4e0b\u6587&nbsp;<code>{id: 'User_1001', feature: 'Annotation'}<\/code>\uff0c\u7528\u6237 B \u7684\u4e0a\u4e0b\u6587&nbsp;<code>{id: 'User_1002', feature: 'Annotation'}<\/code>\uff0c\u5373\u4f7f&nbsp;<code>key<\/code>&nbsp;\u76f8\u540c\u4e5f\u4e0d\u4f1a\u51b2\u7a81\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u952e\u540d\uff08key\uff09\u547d\u540d\u89c4\u8303<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li><code>key<\/code>&nbsp;\u9700\u5728\u540c\u4e00&nbsp;<code>context<\/code>&nbsp;\u4e0b\u552f\u4e00\uff0c\u5efa\u8bae\u4f7f\u7528 \u201c\u4e1a\u52a1\u542b\u4e49 + \u65f6\u95f4\u6233 \/ \u552f\u4e00\u6807\u8bc6\u201d \u547d\u540d\uff08\u5982&nbsp;<code>Default_Style_20251114<\/code>\uff09\uff1b<\/li>\n\n\n\n<li>\u907f\u514d\u4f7f\u7528\u7279\u6b8a\u5b57\u7b26\uff08\u5982&nbsp;<code>@\u3001#\u3001$<\/code>\uff09\uff0c\u5efa\u8bae\u7528\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u7ec4\u5408\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6570\u636e\u7c7b\u578b\u9650\u5236<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li>\u652f\u6301\u5b58\u50a8\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u3001\u5e03\u5c14\u503c\u3001\u5bf9\u8c61\u3001\u6570\u7ec4\u7b49\u53ef JSON \u5e8f\u5217\u5316\u7684\u6570\u636e\uff1b<\/li>\n\n\n\n<li>\u4e0d\u652f\u6301\u5b58\u50a8\u51fd\u6570\u3001DOM \u5143\u7d20\u3001Blob \u7b49\u4e0d\u53ef\u5e8f\u5217\u5316\u7c7b\u578b\uff08\u82e5\u9700\u5b58\u50a8 Blob\uff0c\u9700\u5148\u8f6c\u6362\u4e3a Base64 \u5b57\u7b26\u4e32\uff09\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5f02\u6b65\u64cd\u4f5c\u5fc5\u987b\u5904\u7406<\/strong>\uff1a\n<ul class=\"wp-block-list\">\n<li><code>get<\/code>&nbsp;\u548c&nbsp;<code>set<\/code>&nbsp;\u65b9\u6cd5\u5747\u8fd4\u56de Promise\uff0c\u5fc5\u987b\u4f7f\u7528&nbsp;<code>await<\/code>&nbsp;\u6216&nbsp;<code>.then()<\/code>&nbsp;\u5904\u7406\uff0c\u5426\u5219\u4f1a\u5bfc\u81f4\u6570\u636e\u64cd\u4f5c\u5931\u8d25\uff1b<\/li>\n\n\n\n<li>\u5efa\u8bae\u6dfb\u52a0&nbsp;<code>try\/catch<\/code>&nbsp;\u6355\u83b7\u5f02\u5e38\uff08\u5982\u6d4f\u89c8\u5668\u7981\u7528 IndexedDB\u3001\u5b58\u50a8\u5bb9\u91cf\u4e0d\u8db3\u7b49\u60c5\u51b5\uff09\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001<strong>\u6570\u636e\u6e05\u7406\u8bf4\u660e<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u82e5\u9700\u5220\u9664\u7f13\u5b58\u6570\u636e\uff0c\u53ef\u8c03\u7528&nbsp;<code>storageDriver.remove(context, key)<\/code>&nbsp;\u65b9\u6cd5\uff08\u793a\u4f8b\u5982\u4e0b\uff09\uff1b\u6d4f\u89c8\u5668 IndexedDB \u6570\u636e\u4e0d\u4f1a\u81ea\u52a8\u8fc7\u671f\uff0c\u9700\u624b\u52a8\u6e05\u7406\u65e0\u7528\u6570\u636e\uff0c\u907f\u514d\u5360\u7528\u8fc7\u591a\u5b58\u50a8\u7a7a\u95f4\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function deleteStorageData() {\n  const { IndexedDBStorageDriver } = PDFViewCtrl.storage;\n  const storageDriver = pdfui.pdfViewer.getIoC().getInstanceByClass(IndexedDBStorageDriver);\n\n  const context = { id: 'PDF_User_Config', feature: 'Annotation_Style' };\n  const storageKey = 'Default_Annotation_Color';\n\n  \/\/ \u5220\u9664\u6307\u5b9a context \u548c key \u5bf9\u5e94\u7684\u7f13\u5b58\n  await storageDriver.remove(context, storageKey);\n  console.log('\u6570\u636e\u5220\u9664\u6210\u529f');\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u8c03\u8bd5\u4e0e\u67e5\u770b\u7f13\u5b58\u6570\u636e<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\u6253\u5f00\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\uff08F12\uff09\uff0c\u5207\u6362\u5230\u300cApplication\u300d\uff08\u5e94\u7528\uff09\u9762\u677f\uff1b\n\u5728\u5de6\u4fa7\u5bfc\u822a\u680f\u627e\u5230\u300cIndexedDB\u300d\uff0c\u5c55\u5f00\u540e\u53ef\u770b\u5230 SDK \u5b58\u50a8\u7684\u6570\u636e\u5e93\uff08\u540d\u79f0\u901a\u5e38\u5305\u542b PDFViewCtrl\uff09\uff1b\n\u4f9d\u6b21\u5c55\u5f00\u6570\u636e\u5e93 \u2192 \u5b58\u50a8\u4e0a\u4e0b\u6587\u5bf9\u5e94\u7684\u5b58\u50a8\u533a \u2192 \u53ef\u67e5\u770b \/ \u7f16\u8f91 \/ \u5220\u9664\u5b58\u50a8\u7684 key \u548c value\uff0c\u65b9\u4fbf\u8c03\u8bd5\u3002<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"420\" src=\"https:\/\/support.fuxinsoft.cn\/wp-content\/uploads\/2025\/11\/image-1024x420.png\" alt=\"\" class=\"wp-image-7195\" srcset=\"https:\/\/support.fuxinsoft.cn\/wp-content\/uploads\/2025\/11\/image-1024x420.png 1024w, https:\/\/support.fuxinsoft.cn\/wp-content\/uploads\/2025\/11\/image-300x123.png 300w, https:\/\/support.fuxinsoft.cn\/wp-content\/uploads\/2025\/11\/image-768x315.png 768w, https:\/\/support.fuxinsoft.cn\/wp-content\/uploads\/2025\/11\/image.png 1196w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e03\u3001\u53c2\u8003\u6587\u6863<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b98\u65b9\u5f00\u53d1\u8005\u624b\u518c\uff1a<a href=\"https:\/\/devdocs.fuxinsoft.cn\/development-guide\/pdf-sdk-web\/customize\/custom-storage-driver.html\" target=\"_blank\" rel=\"noreferrer noopener\">PDF Web SDK \u81ea\u5b9a\u4e49\u5b58\u50a8\u9a71\u52a8<\/a><\/li>\n\n\n\n<li>IndexedDB \u6d4f\u89c8\u5668\u517c\u5bb9\u6027\uff1a<a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/API\/IndexedDB_API#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7\" target=\"_blank\" rel=\"noreferrer noopener\">MDN IndexedDB \u517c\u5bb9\u6027<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u3001\u529f\u80fd\u8bf4\u660e \u4e8c\u3001\u6838\u5fc3 API \u8bf4\u660e API \u65b9\u6cd5 \u4f5c\u7528 \u53c2\u6570\u8bf4\u660e storageDriver.get(con [&hellip;]<\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[1187,595,1181,1186,632],"class_list":["post-7184","post","type-post","status-publish","format-standard","hentry","category-websdk","tag-context","tag-websdk","tag-1181","tag-1186","tag-632"],"pp_statuses_selecting_workflow":false,"pp_workflow_action":"current","pp_status_selection":"publish","_links":{"self":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/7184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7184"}],"version-history":[{"count":5,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/7184\/revisions"}],"predecessor-version":[{"id":7224,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=\/wp\/v2\/posts\/7184\/revisions\/7224"}],"wp:attachment":[{"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.fuxinsoft.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}