معاينات PDF المضمنة

:discourse2: ملخص معاينات PDF المدمجة هو مكون سمة مخصص لأجهزة سطح المكتب فقط، سيسمح لك بإنشاء معاينات للمرفقات بصيغة PDF.
:eyeglasses: معاينة معاينة في منشئ سمات Discourse (أجهزة سطح المكتب فقط)
:hammer_and_wrench: رابط المستودع https://github.com/discourse/discourse-pdf-previews
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

الميزات

قبل

بعد

كما ذُكر أعلاه، سيعمل هذا المكون فقط على أجهزة سطح المكتب. لا توجد فائدة كبيرة من عرض المعاينات على الأجهزة المحمولة لأن كل شيء سيكون صغيرًا جدًا وصعب القراءة.

يستخدم هذا المكون التنفيذ الأصلي للمتصفح لعرض ملفات PDF، لذا قد تختلف النتائج في المظهر باختلاف المتصفحات.

أيضًا، يرجى ملاحظة أن رفع ملفات PDF غير مسموح به افتراضيًا في Discourse. إذا كنت تريد السماح لمستخدميك برفع ملفات PDF، فستحتاج إلى إضافة هذا الامتداد إما إلى authorized_extensions إذا كنت تريد أن يتمكن جميع المستخدمين من رفع ملفات PDF، أو authorized_extensions_for_staff إذا كنت تريد تقييد ذلك على أعضاء الطاقم فقط.

:information_source: إذا كنت تستخدم S3، فقد تحتاج أيضًا إلى تحديث سياسة CORS الخاصة بك. يرجى الاطلاع على المنشور أدناه: Inline PDF Previews - #106 by JammyDodger

كيف أستخدمه؟

  1. تثبيت المكون
  2. السماح برفع ملفات PDF
  3. تحديث الصفحة
  4. رفع ملف PDF

هذا كل شيء. الباقي يجب أن يعمل تلقائيًا.

الإعدادات

الاسم الوصف
وضع المعاينة مدمج: سيتم عرض مرفقات PDF مدمجة داخل المنشورات

تبويب جديد: ستؤدي روابط مرفقات PDF إلى نقل المستخدم إلى تبويب جديد حيث سيتم عرض ملف PDF

ميزات إضافية

إذا كنت تريد أن لا يتم عرض ملف PDF معين مدمجًا، فيمكنك ببساطة إضافة مسافة قبل اسم الملف - على سبيل المثال:

هذا سيظهر مدمجًا

[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

هذا لن يظهر مدمجًا

[ sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

:discourse2: مُستضاف لدينا؟ تتوفر مكونات السمات للاستخدام في خططنا القياسية، والأعمال، والمؤسسات.

68 إعجابًا

I’m hosting my uploads and images on S3, and the preview is blocked by a “CORS policy: No ‘Access-Control-Allow-Origin’ header is present”.

Below is what Chrome console says:

Access to fetch at 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (redirected from 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') from origin 'https://lounge.travelmassive.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Update

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
إعجابَين (2)

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end, then in the CORS configuration you should also add your domain without slash at the end like this:
https://mydiscourse.url

إعجاب واحد (1)

I noticed that your uploads are on AWS so, the issue is probably CORS related (the component is not active on your site for me to confirm). See the post below yours.

thanks for sharing that!

Please note that this issue will only affect self-hosters that have set up something like S3. Self-hosters that are not using S3 will not run into this issue. Customers hosted by CDCK will also not need to worry about that since they already have that set up.

That said, CORS configuration is a bit outside of the scope of this topic. If your uploads bucket does not allow your own domain access, then that needs to be fixed regardless since there might be some other issues caused by that.

I’m a little bit unsure what happened here. Both cases seem to be working for me everytime I try. We can just chalk it up to a transitory network issue but please let me know if you see it again :+1:

I pushed a tiny update to this component that should improve the loading perception, there’s now a theme-color based placeholder instead of the default browser Iframe styles. It only shows up while the file is loading so 99% of the time, you won’t even notice it.

Given that most PDFs will load instantly I didn’t feel like adding a spinner would be worth it.

9 إعجابات

هل من الممكن جعل معاينة PDF قابلة للإخفاء بإضافة مسافة قبل رابط الرفع، مثلما يحدث مع التضمين البسيط؟ في بعض الأحيان تريد قائمة بالوثائق وليس المعاينات، وفي أحيان أخرى تريد معاينة.

9 إعجابات

أنا أستخدم متصفح سفاري على نظام ماك أو إس كاتالينا، ولا أملك أي إعدادات تمنع عرض ملفات PDF داخل المتصفح — على سبيل المثال، الرابط http://www.orimi.com/pdf-test.pdf يعمل بشكل صحيح. لكنني لا أزال أواجه نافذة/رسالة “الإضافة المحظورة” عند معاينة التصميم في منشئ السمات.

إعدادات الموقع المحددة في تفضيلات سفاري لا تختلف عن المواقع الأخرى.

هل يواجه أي شخص آخر هذه المشكلة؟

3 إعجابات

لا يزال الأمر لا يعمل بالنسبة لي على Safari في نظام MacOS Big Sur. لا توجد إعدادات خاصة لإضافات المدونة، وتُعرض ملفات PDF أخرى في المتصفح.

يُظهر Safari Web Inspector الشكاوى التالية عند تحميل صفحة المعاينة في theme-creator:
توجيه غير معترف به في سياسة أمان المحتوى 'worker-src'.
تم رفض تحميل blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 لأنه غير موجود في توجيه object-src لسياسة أمان المحتوى.

3 إعجابات

سيكون هذا تحسينًا كبيرًا لهذا المكون! هل هذا ممكن، @Johani؟

5 إعجابات

نفس المشكلة بالنسبة لي في Firefox، ولكن فقط بعد الزيارة الثانية :wink:
هل هناك حل بديل لهذه المشكلة؟ هل يمكن الإعلان يدويًا في إعدادات CSP؟

شكرًا لك

إعجاب واحد (1)

توقف هذا عن العمل على موقعي. أرى مربعًا أسود كبيرًا بدلاً من معاينة ملف PDF:

إلغاء تفعيل الإضافات عبر الوضع الآمن لا يُحدث أي فرق، وكذلك إزالة كل مكون آخر من مكونات السمة.

حدث هذا بعد نقل صور وملفات التحميل إلى S3، وقد يكون هذا هو السبب. آمل ألا يكون كذلك، لأنه لا يمكن إعادتها بسهولة!

أنا في حيرة. للأسف، إنه مكون رائع. هل لديك أي اقتراحات؟

إعجابَين (2)

أرى نفس السلوك مع تفعيل تحميلات S3.

3 إعجابات

هل ما زلت قادرًا على تنزيل ملف PDF؟
لا يزال يعمل معي (s3 + وسائط آمنة وبدون CDN) :thinking:

إعجاب واحد (1)

نعم، نحن كذلك. لدينا نفس الإعداد مثلك (أعتقد).

إعجاب واحد (1)

:thinking:

  • روابطي في الرسائل تكون على شكل domain/secure-media-uploads/original/...
  • لكن في وحدة التحكم/الشبكة، يمكنني رؤية أن التنزيلات الفعلية تأتي من الحوض (bucket).
    هل ترى بيانات اعتماد amz؟

إذا لم تكن موجودة، فربما يساعدك هذا؟

أتذكر أيضًا أنه كان يحدث شيء غريب عندما حاولت نقل منشور من فئات (أو ربما كان ذلك نسخًا ولصقًا؟). نجح الأمر في النهاية عندما قمت بإعادة تحميل الملف.

إعجاب واحد (1)

أواجه نفس السلوك على تثبيت جديد لـ Discourse وعلى ملف PDF مرفق جديد.

3 إعجابات

شكرًا لك يا @Benjamin_D. اتضح أن رفع الملفات الآمن غير مفعل لدي، وروابطي تبدو جميعها جيدة وتعمل بشكل صحيح، مثل هذا الرابط:

The HiNZ eHealth Forum - trusted online digital health discussion

لذا أنا في حيرة - خاصةً حول سبب عمله في منتديين أديرهما ولا يعمل في الآخر - مع أن S3 هو الاختلاف الوحيد. وأنك نجحت في جعله يعمل مع S3. أنا حقًا في حيرة من أمري.

إعجاب واحد (1)

بعد التحديث إلى أحدث إصدار من discourse، لم تعد ملفات PDF المرفقة تُعرض. ما الذي قد يكون المشكلة؟

إعجاب واحد (1)

قد يكون هناك تعارض مع مكون أو سمة أخرى. إنه يعمل كما هو متوقع بالنسبة لي. ابدأ بتعطيل المكونات الأخرى وجرب استخدام السمة الافتراضية إذا كانت سمتك مختلفة. الأمر نفسه ينطبق على الإضافات.

3 إعجابات

حسنًا - لقد أحرزت تقدمًا. تعطيل عمليات التحميل إلى S3 يحل المشكلة بالنسبة للuploads الجديدة. لكنني أواجه فوضى بين S3 والمحلي إذا سلكْتُ هذا المسار!

قد يكون الأمر أنني لا أستخدم ميزة CDN (وهي CloudFront) التي تظهر الأخطاء المزعجة في صفحة المسؤول. سأحاول إعداد ذلك وأرى ما إذا كان ذلك سيعمل.

لاحقًا - لا، لا يُحدث CDN أي فرق.

لاحقًا جدًا - تم إزالة عمليات التحميل إلى S3 بنجاح (مع بعض الجهد)، لذا كل شيء على ما يرام الآن.

الآن، أنا متحمس لتحسينه! هل هناك أي شخص موهوب يمتلك المهارات ويهتم بمحاولة ذلك؟

4 إعجابات

أبحث عن إضافة تسمح بفتح ملف PDF في علامة تبويب جديدة.
السلوك الحالي لمنصتي Discourse يسمح بالتنزيل فقط.
هل من الممكن تحقيق ذلك باستخدام سمة مشابهة؟

5 إعجابات